Components
Menu
A list of actions in a popover.
Menu opens a list of actions next to an anchor element. MenuItem is one action. MenuList is the same list without the popover, for use in the page.
import Menu from '@hone-ui/react/Menu';
import MenuList from '@hone-ui/react/MenuList';
import MenuItem from '@hone-ui/react/MenuItem';Examples
Profile
My account
Logout
<Paper sx={{ width: 240 }}>
<MenuList aria-label="Actions">
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem disabled>Logout</MenuItem>
</MenuList>
</Paper>const [anchor, setAnchor] = useState<HTMLElement | null>(null);
<Button aria-haspopup="menu" onClick={(event) => setAnchor(event.currentTarget)}>Options</Button>
<Menu anchorEl={anchor} open={anchor !== null} onClose={() => setAnchor(null)} aria-label="Options">
<MenuItem onClick={() => setAnchor(null)}>Profile</MenuItem>
<MenuItem onClick={() => setAnchor(null)}>Logout</MenuItem>
</Menu>Menu props
| Prop | Type | Default | Description |
|---|---|---|---|
anchorEl | Element, null | The element the menu opens from. | |
open | boolean | Shows the menu. | |
onClose | (event, reason) => void | reason is escapeKeyDown, backdropClick or tabKeyDown. | |
anchorOrigin | { vertical, horizontal } | { vertical: 'bottom', horizontal: 'left' } | Which side of the anchor it opens on. |
autoFocus | boolean | true | Focuses the first item on open. |
disableAutoFocusItem | boolean | false | Focuses the menu instead of an item. |
slotProps.paper, slotProps.list | object | Props for the surface and the list. | |
aria-label, aria-labelledby, id | string | Name and id of the role="menu" element. | |
sx, className, style, ref | Go to the surface. |
MenuList takes dense, disablePadding, autoFocus and autoFocusItem. MenuItem takes
onClick, selected, disabled, dense, divider and disableGutters in a menu.
Notes
- Choosing an item does not close the menu. Close it from the item's
onClick. transformOrigin,TransitionComponentandkeepMountedare not supported.
Accessibility
The list is role="menu" and items are role="menuitem". Give the trigger
aria-haspopup="menu" and name the menu.