https://chakra-ui.com/docs/overlay/menu
An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.
Chakra UI exports 8 components for rendering menus:
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.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.} from "@chakra-ui/react"
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.
The default MenuButton can be styled using the usual styled-system props, but it starts off plainly styled.
Using the as prop of the MenuButton, you can render a custom component instead of the default MenuButton. For instance, you can use Chakra's Button component, or your own custom component.
Custom components must take a ref prop which is assigned to the React component that triggers the menu opening. This is so that the MenuList popover can be positioned correctly. Without this, the MenuList will render in an undefined position.
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.
You can add icon to each MenuItem by passing the icon prop. To add a commands (or hotkeys) to menu items, you can use the command prop.
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.