Menu: The wrapper component provides context, state, and focus management.
MenuList: The wrapper for the menu items. Must be a direct child of Menu.
MenuButton: The trigger for the menu list. Must be a direct child of Menu.
MenuItem: The trigger that handles menu selection. Must be a direct child of a MenuList.
MenuGroup: A wrapper to group related menu items.
MenuDivider: A visual separator for menu items and groups.
MenuOptionGroup: A wrapper for checkable menu items (radio and checkbox).
MenuItemOption: The checkable menu item, to be used with MenuOptionGroup.

import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  MenuItemOption,
  MenuGroup,
  MenuOptionGroup,
  MenuIcon,
  MenuCommand,
  MenuDivider,
} from "@chakra-ui/react"

Usage#

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    Actions
  </MenuButton>
  <MenuList>
    <MenuItem>Download</MenuItem>
    <MenuItem>Create a Copy</MenuItem>
    <MenuItem>Mark as Draft</MenuItem>
    <MenuItem>Delete</MenuItem>
    <MenuItem>Attend a Workshop</MenuItem>
  </MenuList>
</Menu>

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    Actions
  </MenuButton>
  <MenuList>
    <MenuItem>Download</MenuItem>
    <MenuItem>Create a Copy</MenuItem>
    <MenuItem>Mark as Draft</MenuItem>
    <MenuItem>Delete</MenuItem>
    <MenuItem>Attend a Workshop</MenuItem>
  </MenuList>
</Menu>

Editable Example

Accessing the internal state#

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

<Menu>
  {({ isOpen }) => (
    <>
      <MenuButton isActive={isOpen} as={Button} rightIcon={<ChevronDownIcon />}>
        {isOpen ? "Close" : "Open"}
      </MenuButton>
      <MenuList>
        <MenuItem>Download</MenuItem>
        <MenuItem onClick={() => alert("Kagebunshin")}>Create a Copy</MenuItem>
      </MenuList>
    </>
  )}
</Menu>

<Menu>
  {({ isOpen }) => (
    <>
      <MenuButton isActive={isOpen} as={Button} rightIcon={<ChevronDownIcon />}>
        {isOpen ? "Close" : "Open"}
      </MenuButton>
      <MenuList>
        <MenuItem>Download</MenuItem>
        <MenuItem onClick={() => alert("Kagebunshin")}>Create a Copy</MenuItem>
      </MenuList>
    </>
  )}
</Menu>

Editable Example

When focus is on the MenuButton or within the MenuList and you type a letter key, a search begins. Focus will move to the first MenuItem that starts with the letter you typed.

Open the menu, try and type any letter, (say "S") to see the focus movement.

<Menu>
  <MenuButton
    px={4}
    py={2}
    transition="all 0.2s"
    borderRadius="md"
    borderWidth="1px"
    _hover={{ bg: "gray.100" }}
    _expanded={{ bg: "red.200" }}
    _focus={{ outline: 0, boxShadow: "outline" }}
  >
    File <ChevronDownIcon />
  </MenuButton>
  <MenuList>
    <MenuItem>New File</MenuItem>
    <MenuItem>New Window</MenuItem>
    <MenuDivider />
    <MenuItem>Open...</MenuItem>
    <MenuItem>Save File</MenuItem>
  </MenuList>
</Menu>

<Menu>
  <MenuButton
    px={4}
    py={2}
    transition="all 0.2s"
    borderRadius="md"
    borderWidth="1px"
    _hover={{ bg: "gray.100" }}
    _expanded={{ bg: "red.200" }}
    _focus={{ outline: 0, boxShadow: "outline" }}
  >
    File <ChevronDownIcon />
  </MenuButton>
  <MenuList>
    <MenuItem>New File</MenuItem>
    <MenuItem>New Window</MenuItem>
    <MenuDivider />
    <MenuItem>Open...</MenuItem>
    <MenuItem>Save File</MenuItem>
  </MenuList>
</Menu>

Editable Example

Just another example.#

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    Your Cats
  </MenuButton>
  <MenuList>
    <MenuItem minH="48px">
      <Image
        boxSize="2rem"
        borderRadius="full"
        src="https://placekitten.com/100/100"
        alt="Fluffybuns the destroyer"
        mr="12px"
      />
      <span>Fluffybuns the Destroyer</span>
    </MenuItem>
    <MenuItem minH="40px">
      <Image
        boxSize="2rem"
        borderRadius="full"
        src="https://placekitten.com/120/120"
        alt="Simon the pensive"
        mr="12px"
      />
      <span>Simon the pensive</span>
    </MenuItem>
  </MenuList>
</Menu>

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    Your Cats
  </MenuButton>
  <MenuList>
    <MenuItem minH="48px">
      <Image
        boxSize="2rem"
        borderRadius="full"
        src="https://placekitten.com/100/100"
        alt="Fluffybuns the destroyer"
        mr="12px"
      />
      <span>Fluffybuns the Destroyer</span>
    </MenuItem>
    <MenuItem minH="40px">
      <Image
        boxSize="2rem"
        borderRadius="full"
        src="https://placekitten.com/120/120"
        alt="Simon the pensive"
        mr="12px"
      />
      <span>Simon the pensive</span>
    </MenuItem>
  </MenuList>
</Menu>

Editable Example

You can add custom menu icons and commands (or hotkeys) for each menu by passing the command prop.

<Menu>
  <MenuButton size="sm" colorScheme="teal">
    Open menu
  </MenuButton>
  <MenuList>
    <MenuItem command="⌘T">New Tab</MenuItem>
    <MenuItem command="⌘N">New Window</MenuItem>
    <MenuItem command="⌘⇧N">Open Closed Tab</MenuItem>
    <MenuItem command="⌘O">Open File...</MenuItem>
  </MenuList>
</Menu>

Lazily mounting MenuItem#

By default, the Menu component renders all children of MenuList 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 MenuList until that menu is open, you can use the isLazy prop. This is useful if your Menu needs to be extra performant, or make network calls on mount that should only happen when the component is displayed.

<Menu isLazy>
  <MenuButton size="sm" colorScheme="teal">
    Open menu
  </MenuButton>
  <MenuList>
    {/* initially mounted */}
    <MenuItem>Menu 1</MenuItem>
    {/* initially mounted */}
    <MenuItem>New Window</MenuItem>
    {/* initially mounted */}
    <MenuItem>Open Closed Tab</MenuItem>
    {/* initially mounted */}
    <MenuItem>Open File</MenuItem>
    </MenuList>
  <MenuList>
</Menu>

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

<Menu>
  <MenuButton size="sm" colorScheme="teal">
    Open menu
  </MenuButton>
  <Portal>
    <MenuList>
      <MenuItem>Menu 1</MenuItem>
      <MenuItem>New Window</MenuItem>
      <MenuItem>Open Closed Tab</MenuItem>
      <MenuItem>Open File</MenuItem>
    </MenuList>
  </Portal>
</Menu>

MenuGroup#

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

<Menu>
  <MenuButton as={Button} colorScheme="pink">
    Profile
  </MenuButton>
  <MenuList>
    <MenuGroup title="Profile">
      <MenuItem>My Account</MenuItem>
      <MenuItem>Payments </MenuItem>
    </MenuGroup>
    <MenuDivider />
    <MenuGroup title="Help">
      <MenuItem>Docs</MenuItem>
      <MenuItem>FAQ</MenuItem>
    </MenuGroup>
  </MenuList>
</Menu>

<Menu>
  <MenuButton as={Button} colorScheme="pink">
    Profile
  </MenuButton>
  <MenuList>
    <MenuGroup title="Profile">
      <MenuItem>My Account</MenuItem>
      <MenuItem>Payments </MenuItem>
    </MenuGroup>
    <MenuDivider />
    <MenuGroup title="Help">
      <MenuItem>Docs</MenuItem>
      <MenuItem>FAQ</MenuItem>
    </MenuGroup>
  </MenuList>
</Menu>

Editable Example

You can compose a menu for table headers to help with sorting and filtering options. Use the MenuOptionGroup and MenuItemOption components.

<Menu closeOnSelect={false}>
  <MenuButton as={Button} colorScheme="blue">
    MenuItem
  </MenuButton>
  <MenuList minWidth="240px">
    <MenuOptionGroup defaultValue="asc" title="Order" type="radio">
      <MenuItemOption value="asc">Ascending</MenuItemOption>
      <MenuItemOption value="desc">Descending</MenuItemOption>
    </MenuOptionGroup>
    <MenuDivider />
    <MenuOptionGroup title="Country" type="checkbox">
      <MenuItemOption value="email">Email</MenuItemOption>
      <MenuItemOption value="phone">Phone</MenuItemOption>
      <MenuItemOption value="country">Country</MenuItemOption>
    </MenuOptionGroup>
  </MenuList>
</Menu>

<Menu closeOnSelect={false}>
  <MenuButton as={Button} colorScheme="blue">
    MenuItem
  </MenuButton>
  <MenuList minWidth="240px">
    <MenuOptionGroup defaultValue="asc" title="Order" type="radio">
      <MenuItemOption value="asc">Ascending</MenuItemOption>
      <MenuItemOption value="desc">Descending</MenuItemOption>
    </MenuOptionGroup>
    <MenuDivider />
    <MenuOptionGroup title="Country" type="checkbox">
      <MenuItemOption value="email">Email</MenuItemOption>
      <MenuItemOption value="phone">Phone</MenuItemOption>
      <MenuItemOption value="country">Country</MenuItemOption>
    </MenuOptionGroup>
  </MenuList>
</Menu>

Editable Example

Accessibility#

Keyboard Interaction#

Key	Action
`Enter` or `Space`	When `MenuButton` receives focus, opens the menu and places focus on the first menu item.
`ArrowDown`	When `MenuButton` receives focus, opens the menu and moves focus to the first menu item.
`ArrowUp`	When `MenuButton` receives focus, opens the menu and moves focus to the last menu item.
`Escape`	When the menu is open, closes the menu and sets focus to the `MenuButton`.
`Tab`	no effect
`Home`	When the menu is open, moves focus to the first item.
`End`	When the menu is open, moves focus to the last item.
`A-Z` or `a-z`	When 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 MenuButton:

role is set to button.
aria-haspopup is set to menu.
When the menu is displayed, aria-expanded is set to true.
aria-controls is set to the id of the MenuList.

For MenuList:

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

For MenuItem:

role is set to menuitem.
Gets one of these roles menuitem/menuitenradio/ menuitemcheckbox.

Props#

Name	Type	Description	Default
arrowPadding	`number`	The distance of the arrow to its next border (numeric) E.g. arrowPadding = borderRadius * 2	-
arrowShadowColor	`string`		-
arrowSize	`number`		-
autoSelect	`boolean`	If `true`, the first enabled menu item will be selected when the menu opens.	`true`
closeOnBlur	`boolean`	If `true`, the menu will close when you click outside the menu list	`true`
closeOnSelect	`boolean`	If `true`, the menu will close when a menu item is clicked	`true`
colorScheme	`string`		-
defaultIsOpen	`boolean`		-
fixed	`boolean`		-
flip	`boolean`		-
gutter	`number`		-
id	`string`		-
isLazy	`boolean`	Performance 🚀: If `true`, the MenuItem rendering will be deferred until the menu is open.	-
isOpen	`boolean`		-
matchWidth	`boolean`		-
modifiers	`Modifier<string, any>[]`		-
offset	`[number, number]`		-
onClose	`(() => void)`		-
onOpen	`(() => void)`		-
placement	`"top" \| "right" \| "bottom" \| "left" \| "auto" \| "auto-start" \| "auto-end" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end"`		-
preventOverflow	`boolean`		-
size	`string`		-
variant	`string`		-

MenuButton Props#

MenuButton composes Box so you can pass all Box props to change its style.

MenuList Props#

MenuList composes Box so you can pass all Box props to change its style.

MenuItem Props#

Name	Type	Description	Default
command	`string`	Right-aligned label text content, useful for displaying hotkeys.	-
icon	`React.ReactElement`	The icon to render before the menu item's label.	-
iconSpacing	`SystemProps["mr"]`	The spacing between the icon and menu item's label	-
isDisabled	`boolean`		-
isFocusable	`boolean`		-

MenuGroup Props#

MenuGroup composes Box so you can pass all Box props to change its style.

MenuOptionGroup Props#

Name	Type	Default
defaultValue	`string \| string[]`	-
onChange	`((value: string \| string[]) => void)`	-
type	`"checkbox" \| "radio"`	-
value	`string \| string[]`	-

MenuItemOption Props#

MenuItemOption composes Box so you can pass all box props in addition to these:

Name	Type	Description	Default
command	`string`	Right-aligned label text content, useful for displaying hotkeys.	-
icon	`React.ReactElement`	The icon to render before the menu item's label.	-
iconSpacing	`SystemProps["mr"]`	The spacing between the icon and menu item's label	-
isChecked	`boolean`		-
isDisabled	`boolean`		-
isFocusable	`boolean`		-
type	`"checkbox" \| "radio"`		-
value	`string`		-

Edit this page

Menu

Import#

Usage#

Accessing the internal state#

Letter Navigation#

Just another example.#

Adding menu commands#

Lazily mounting MenuItem#

Rendering menu in a portal#

MenuGroup#

Menu option groups#

Accessibility#

Keyboard Interaction#

ARIA roles#

Props#

Menu Props#

MenuButton Props#

MenuList Props#

MenuItem Props#

MenuGroup Props#

MenuOptionGroup Props#

MenuItemOption Props#