Menu

An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.

Import#

import { Menu } from '@chakra-ui/react'

Usage#

Accessing the internal state#

To access the internal state of the Menu.Root, use a function as children (commonly known as a render prop). You'll get access to the internal state open and method onClose.

Rendering icon and command#

Lazily mounting Menu.Item#

By default, the Menu.Root component renders all children of Menu.Content to the DOM, meaning that invisible menu items are still rendered but are hidden by styles.

If you want to defer rendering of each children of Menu.Content until that menu is open, you can use the isLazy prop.

This is useful to improve performance.

Rendering menu in a portal#

To render menus in a portal, import the Portal component and wrap the Menu.Content within the Portal.

Grouping menu items#

To group related menu items, use the MenuGroup component and pass it a title for the group name.

To render a Menu.Item as a link, use the attributes asChild prop

You can compose a menu for table headers to help with sorting and filtering options. Use the Menu.OptionGroup and Menu.OptionItem components.

Accessibility#

Keyboard Interaction#

KeyAction
Enter or SpaceWhen Menu.Trigger receives focus, opens the menu and places focus on the first menu item.
ArrowDownWhen Menu.Trigger receives focus, opens the menu and moves focus to the first menu item.
ArrowUpWhen Menu.Trigger receives focus, opens the menu and moves focus to the last menu item.
EscapeWhen the menu is open, closes the menu and sets focus to the Menu.Trigger.
Tabno effect
HomeWhen the menu is open, moves focus to the first item.
EndWhen the menu is open, moves focus to the last item.
A-Z or a-zWhen the menu is open, moves focus to the next menu item with a label that starts with the typed character if such an menu item exists.

ARIA roles#

For Menu.Trigger:

  • role is set to button.
  • aria-haspopup is set to menu.Root.
  • When the menu is displayed, aria-expanded is set to true.
  • aria-controls is set to the id of the Menu.Content.

For Menu.Content:

  • role is set to menu.Root.
  • aria-orientation is set to vertical.

For Menu.Item:

  • role is set to menu.item.
  • Gets one of these roles menu.item/menu.itemradio/ menu.itemcheckbox.

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel