Menu

The CMenu component is an accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.

See CMenu's accessibility report

Import#

Chakra UI exports 8 components for rendering menus:

  • CMenu: The wrapper component that provides context, state, and focus management.
  • CMenuList: The wrapper for the menu items. Must be a direct child of CMenu.
  • CMenuButton: The trigger for the menu list. Must be a direct child of CMenu.
  • CMenuItem: The trigger that handles menu selection. Must be a direct child of a CMenuList.
  • CMenuGroup: A wrapper to group related menu items.
  • CMenuDivider: A visual separator for menu items and groups.
  • CMenuOptionGroup: A wrapper for checkable menu items (radio and checkbox)
  • CMenuItemOption: The checkable menu item, to be used with CMenuOptionGroup
import {
  CMenu,
  CMenuButton,
  CMenuList,
  CMenuItem,
  CMenuGroup,
  CMenuDivider,
  CMenuOptionGroup,
  CMenuItemOption,
} from "@chakra-ui/vue";

Usage#

Editable Example 
<c-menu>
  <c-menu-button right-icon="chevron-down">
    Actions
  </c-menu-button>
  <c-menu-list>
    <c-menu-item>Download</c-menu-item>
    <c-menu-item>Create a Copy</c-menu-item>
    <c-menu-item>Mark as Draft</c-menu-item>
    <c-menu-item>Delete</c-menu-item>
    <c-menu-item as="a" href="#">
      Attend a Workshop
    </c-menu-item>
  </c-menu-list>
</c-menu>

Accessing the internal state#

To access the internal state of the CMenu, you can use the default scoped slot to access the isOpen value of the Menu component. isOpen reflects the current open or closed state of the CMenu component.

Editable Example 
<template>
  <c-menu v-slot="{ isOpen }">
    <c-menu-button :is-active="isOpen" right-icon="chevron-down">
      {{ isOpen ? 'Close' : 'Open' }}
    </c-menu-button>
    <c-menu-list>
      <c-menu-item @click="alert('Kage bushin no jutsu!!! 💨👯👯👯👯💨')" >
        Copy to clipboard
      </c-menu-item>
      <c-menu-item @click="alert('Katon! Gou ka kyuu no jutsu!!! 🔥')">
        Burn to disc
      </c-menu-item>
    </c-menu-list>
  </c-menu>
</template>

<script>
export default {
  methods: {
    alert(value) {
      return alert(value)
    }
  }
}
</script>

Letter Navigation#

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

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

Editable Example 
<c-menu>
  <c-menu-button
    px="4"
    py="2"
    transition="all 0.2s"
    rounded="md"
    borderWidth="1px"
    :_hover="{ bg: 'gray.100' }"
    :_expanded="{ bg: 'red.100' }"
    :_focus="{ outline: 0, boxShadow: 'outline' }"
  >
    File <c-icon name="chevron-down" />
  </c-menu-button>
  <c-menu-list>
    <c-menu-item>New File</c-menu-item>
    <c-menu-item>New Window</c-menu-item>
    <c-menu-divider />
    <c-menu-item>Open...</c-menu-item>
    <c-menu-item>Save File</c-menu-item>
  </c-menu-list>
</c-menu>

Just another example.#

Editable Example 
<c-menu>
  <c-menu-button as="button" right-icon="chevron-down">
    Your Cats
  </c-menu-button>
  <c-menu-list>
    <c-menu-item h="48px">
      <c-image
        size="2rem"
        rounded="full"
        src="https://placekitten.com/100/100"
        alt="Fluffybuns the destroyer"
        mr="12px"
      />
      <span>Fluffybuns the Destroyer</span>
    </c-menu-item>
    <c-menu-item h="40px">
      <c-image
        size="2rem"
        rounded="full"
        src="https://placekitten.com/120/120"
        alt="Simon the pensive"
        mr="12px"
      />
      <span>Simon the pensive</span>
    </c-menu-item>
  </c-menu-list>
</c-menu>

To group related CMenuItems, use the CMenuGroup component and pass it a label for the group name.

Editable Example 
<c-menu>
  <c-menu-button right-icon="chevron-down" variant-color="pink">
    Profile
  </c-menu-button>
  <c-menu-list>
    <c-menu-group title="Profile">
      <c-menu-item>My Account</c-menu-item>
      <c-menu-item>Payments </c-menu-item>
    </c-menu-group>
    <c-menu-divider />
    <c-menu-group title="Help">
      <c-menu-item>Docs</c-menu-item>
      <c-menu-item>FAQ</c-menu-item>
    </c-menu-group>
  </c-menu-list>
</c-menu>

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

Editable Example 
<CMenu :closeOnSelect="false">
  <CMenuButton variantColor="blue">
    MenuItem
  </CMenuButton>
  <CMenuList minWidth="240px">
    <CMenuOptionGroup defaultValue="asc" title="Order" type="radio">
      <CMenuItemOption value="asc">Ascending</CMenuItemOption>
      <CMenuItemOption value="desc">Descending</CMenuItemOption>
    </CMenuOptionGroup>
    <CMenuDivider />
    <CMenuOptionGroup title="Country" type="checkbox">
      <CMenuItemOption value="email">Email</CMenuItemOption>
      <CMenuItemOption value="phone">Phone</CMenuItemOption>
      <CMenuItemOption value="country">Country</CMenuItemOption>
    </CMenuOptionGroup>
  </CMenuList>
</CMenu>

Accessibility#

Keyboard Interaction#

KeyAction
Enter or SpaceWhen MenuButton receives focus, opens the menu and places focus on the first menu item
ArrowDownWhen MenuButton receives focus, opens the menu and moves focus to the first menu item
ArrowUpWhen MenuButton 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 MenuButton
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 MenuButton:

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

For MenuList:

  • It contains the MenuItem has role menu.

API#

CMenu Props#

NameTypeDefaultDescription
isOpenbooleanIf true, the menu will be opened
autoSelectbooleantrueThe menu will select the first enabled item when it opens
closeOnBlurbooleantrueIf true, the menu will close on outside click or blur
closeOnSelectbooleantrueIf true, the menu will close on menu item select

CMenuButton Events#

NameDescription
@clickEvent emitted when CMenuButton is clicked
@keydownEvent emitted when the key is pressed while CMenuButton is focused

CMenuList Props#

NameTypeDescription
placementPopperJS.placementThe placement of the CMenuList

CMenuList Events#

NameDescription
@clickEvent emitted when CMenuList is clicked
@blurEvent emitted when focus is removed from the CMenuList

CMenuItem Props#

NameTypeDescription
isDisabledbooleanIf true, the menu item will be disabled
rolemenuitem, menuitemradio, menuitemcheckboxThe ARIA role of the menuitem

CMenuItem Events#

NameDescription
@clickEvent emitted when CMenuItem is clicked
@keydownEvent emitted when the key is pressed while CMenuItem is focused

CMenuGroup Props#

NameTypeDescription
titlestringThe title of the menu group

CMenuOptionGroup Props#

NameTypeDescription
titlestringTitle of the option group
typeradio, checkboxUsed to add roles menuitemradio or menuitemcheckbox
defaultValuestring, number, Array<string or number>The initial value of the option group
valuestring, number, Array<string or number>The value of the option group

CMenuOptionGroup Events#

NameDescription
@changeEvent emitted when the item selection changes is clicked
@keydownEvent emitted when the key is pressed while CMenuItem is focused

CMenuItemOption Props#

NameTypeDescription
isDisabledbooleanIf true, the menu item will be disabled
valueStringOrNumberUsed to add roles menuitemradio or menuitemcheckbox
typeradio, checkboxThe initial value of the option item

CMenuOptionGroup Events#

NameDescription
@mouseleaveEvent emitted when the mouse enters the CMenuOptionGroup
@mouseenterEvent emitted when the mouse leaves the CMenuOptionGroup

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!