Basic usage
Should be used to provide a list of options inside a popover for users to select from. The component normally requires interaction on a trigger component (button, icon, input etc.) and shows up after.
A Menu composes MenuButton, MenuList (popover) and <MenuItem> or <MenuOption>. It is possible to group
men items with MenuGroup.
Sub Menu
Menu's can have nested sub menus. Currently these are impleneted as horizontal Flyout menus.
Active state
Often times we may want the menu trigger/button to show an active state while the menu is open. This can be
accomplished with the showActiveState prop on MenuButton
Interaction
After interacting with a trigger component, the dropdown should pop up below the trigger component to show a list of options that the user can choose from. Options that are not available should be grey out. When hovering over options, the background color for the option will change. After clicking on one of the options or clicking outside of the dropdown, the dropdown should dismiss. For multi-selection input dropdown, the dropdown should not dismiss unless user clicks outside the dropdown.
Best Practices
- Don’t use for primary actions since it’s hidden behind another component and requires interaction.
- Contain actions that are related to each other
Props
Menu| Name | Type | Description |
placement | "bottom" | "left" | "right" | "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" |
"left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" |
"right-start" | "right-end" | "left-start" | "left-end" bottom-start |
variant | "nav" | "action" | nav menus should also be wrapped in a <nav/> region. They have padding around the sides
and bolded items. action menus are edge to edge action |
size | "small" | "medium" | Size of menu items (maps to button sizes) medium |
defaultOpen | boolean | If true, menu is opened by default false |
onOpen | () => void | If provided, call when menu is opened |
onClose | (args?: OnCloseArgs) => void | If provided, call when menu is closed. An object containing item index and id will be passed if closed via menu item selection |
shouldCloseOnSelect | boolean | If true, closes menu when an item is selected. Defaults to `true` true |
usePortal | boolean | If true, menu is rendered in a portal. Useful when
the trigger is in a container whose overflow is hidden false |
isPersistent | boolean | To render the menu without a popover, set this to true. In an ideal world,
`Menu` could be a standalone component and we would have specified a separate
component for MenuDropdown or similar. But alas, here we are. Sample usage of
this is multiple lists in a mega menu, or any menubar widget
NOTE: If this is meant to be menubar, set `role="menubar"` on MenuList false |
isTabbable | boolean | A Menu with more complex interactions (e.g. secondary action, footer) may need to allow keyboard
functionality. Set this to `true` to allow tabbing. It will trap focus within an active menu
and behave more like a dialog. Prefer alternative solutions like `Modal`. false |
shouldCloseOnDrag | boolean | If true closes menu when dragging starts. Defaults to `false` false |
forceKeepOpen | boolean | If true, menu will stay open on outside click and blur event
usecase: keep the menu open when a houzz-ui Modal is opened from menu item.
And without this prop, the menu will close on clicking the Modal content false |
Accessibility
MenuButtonEnterwill invoke theMenuto openArrowDownorArrowUpwill invoke theMenuto open with first or last item selected, respectivelyaria-controlsis added to point to theMenuListpopover
MenuListArrowDownArrowUpnavigates betweenMenuItemHomewill go to start,Endwill go to end ofMenuList