# @chakra-ui/menu An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management. ## Installation ```sh yarn add @chakra-ui/menu # or npm i @chakra-ui/menu ``` ## Import components ```js import { Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, } from "@chakra-ui/react" ``` ## Usage ```jsx Actions Download Create a Copy Mark as Draft Delete Attend a Workshop ``` ### Accessing the internal state To access the internal state of the Menu, use a function as a `children` (commonly known as a render prop). You'll get access to the internal state `isOpen` and method `onClose`. ```jsx {({ isOpen }) => ( {isOpen ? "Close" : "Open"} Download alert("Kagebunshin")}>Create a Copy )} ``` ### Letter Navigation 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. ```jsx File New File New Window Open... Save File ``` ### Just another example. ```jsx Your Cats

Fluffybuns the Destroyer

Simon the pensive ``` ### MenuGroup To group related `MenuItems`, use the `MenuGroup` component and pass it a label for the group name. ```jsx Profile My Account Payments Docs FAQ ``` ## Menu option groups You can compose a menu for table headers to help with sorting and filtering options. Use the `MenuOptionGroup` and `MenuItemOption` components. ```jsx MenuItem Ascending Descending Email Phone Country ``` ## `closeOnSelect` `MenuItem` and `MenuItemOption` can use the `closeOnSelect` prop to override their parent `Menu`'s behavior. ```jsx Open Menu {/* Clicking on those items will close the menu (default behavior) */} My Account Payments {/* Clicking on those items will keep the menu open */} Email Phone Country ```