Menu

Basic

Grouped menu

• You can group MenuItem in a MenuList by adding ListSubheader.
• You can show multiple MenuList in a Menu by putting them in MenuBody.
• You can show multiple MenuList in a horizontal direction by setting the columns prop to true for Menu.

Sizes

• Menu supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Nested-Collapsible Menu

Basic

• You can create a collapsible menu by using CollapsibleMenuItem component.
• CollapsibleMenuItem can be controlled open state by open and onOpenChange props.
• CollapsibleMenuItem required label prop to render the in MenuItem as a trigger of Collapse component.

Nested Collapsible Menu

• You can create a nested collapsible menu by using CollapsibleMenuItem component recursively.

Menu Collapse Icon

• Collapse Icon can be changed by passing collapseIcon prop to CollapsibleMenuItem.
• Default collapseIcon is ChevronRightOutline.

Nested Collapsible Menu with Checkbox

Dropdown Menu

• Menu can be used as a drop-down menu by wrapping Menu in DropdownMenu component and provide trigger button in DropdownMenuTrigger to toggle the menu.

Controlled open state

• You can control Menu state with open and onOpenChange props:

DropdownConfig

The dropdownConfig props allow you to set the CSS of the dropdown list.

Strategy

• The strategy prop allows you to control the positioning strategy of the popover.
• The available strategies are absolute and fixed.
• The default strategy is absolute.
• View more details: Fixed position scrolling example.

Placement

• If you want to place the drop-down menu anywhere relative to the button, use the dropdownConfig.placement prop.
• The available base directions are top, right, bottom, left.
• Each of these base placements has an alignment in the form [direction]-start and [direction]-end. For example, right-start, or bottom-end. These allow you to align the tooltip to the edges of the button, rather than centering it.
• The default placement is bottom.

Note: The standalone placement prop is deprecated. Use dropdownConfig.placement instead. The placement prop will be removed in the next major version.

Branched menu

• A branched menu can be triggered from a drop-down menu by wrapping the current MenuItem in another DropdownMenu as a DropdownMenuTrigger.
• The branched menu will be toggled from parent menu by hovering or pressing Right Arrow | Left Arrow on the MenuTrigger.

Caret menu

• You can show a caret icon on the drop-down menu by setting the caret prop to true in DropdownMenu.

DropdownMenuTrigger children

• DropdownMenuTrigger allow user to pass any element as the trigger.
• We recommend using a button as a trigger so the menu can work correctly and ensure accessibility.

MenuItem click behavior

• The MenuItem clicked event can be handled by the onItemClick callback prop of Menu or the onClick function of MenuItem.

• In the DropdownMenu component, the MenuItem clicked event will trigger a close drop-down menu. You can prevent this behavior by setting the closeOnItemClick prop of DropdownMenu to false.

MenuItem active behavior

• The MenuItem could be set to active by passing the active prop to MenuItem.

Scrolling long content

• If the menu items exceed the available height or defined max-height of the menu, the MenuBody will be scrollable.

Searchable menu

Basic

Searchable Menu with Select All

Accessibility

Menu, DropdownMenu follows WAI-ARIA recommendations:

Roles and properties

• DropdownMenuTrigger has role="button", aria-haspopup="true", aria-expanded, aria-controls="dropdown-id" attributes
• Menu has role="menu" attribute
• MenuItem has role="menuitem" attribute

Keyboard navigation

Dropdown Menu Trigger

Key	Description
Down Arrow Space Enter Up Arrow	Opens menu and moves focus to first menuitem
Right Arrow	Opens branched menu and moves focus to first menuitem
Left Arrow	Closes branched and moves focus to trigger menuitem

MenuList

Key	Description
Down Arrow	Moves focus to the next menu item. If focus is on the last menu item, moves focus to the first menu item.
Up Arrow	Moves focus to the previous menu item. If focus is on the first menu item, moves focus to the last menu item.
Home	Moves focus to the first menu item.
End	Moves focus to the last menu item.
Space/Enter	Trigger MenuItem clicked event.
A-Z a-z	Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists. Otherwise, focus does not move.
Escape	Closes the drop-down menu. Sets focus to the menu button.