MenuItem

ARIA

RTL

Menu items are used in such vertical menues and containers as Popovers, Sidebars, Drawers, Dialogs etc.

Menu item row heights can vary based on the amount of content in each row. The content in each row is flexible. By default, each menu item row height is Medium(md) 40px for one line of content.

Anatomy


    <MenuItem>...</MenuItem>

Default

AsLink

Menu item text

Anatomy


    <MenuItem>
      ...
      <MenuItem.Title>...</MenuItem.Title>
      ...
    </MenuItem>

With icon

With meta

Anatomy


    <MenuItem>
      ...
      <MenuItem.Title>...</MenuItem.Title>
      <MenuItem.Checkbox />
      ...
    </MenuItem>

Checkbox

Anatomy


    <MenuItem>
      ...
      <MenuItem.Title>...</MenuItem.Title>
      <MenuItem.Radio />
      ...
    </MenuItem>

Radio

Anatomy


    <MenuItem>
      ...
      <MenuItem.MultiTitle />
      ...
    </MenuItem>

MultiTitle

Multi Line Items

Expand collapse

Vision Getting started How to contribute?Colours palette Tokens Transform SVG Manifest

Accordion Avatar Breadcrumb Button Checkbox

MenuItem

Name	Type	Required	Default	Description
as	a \| button	No	button	Rendered HTML element
isActive	boolean	No	false	Is MenuItem active. (Not for radio and checkbox variant)
isSelected	boolean	No	false	Is MenuItem checked/unchecked. For radio and checkbox variant.
className	string	Yes	-	Tailwind classes for customization of wrapper.