Menu
Usage
Controlled
Dropdown opened state can be controlled with opened
and onChange
props:
Show menu on hover
Set trigger="hover"
to reveal dropdown when hovers over menu target and dropdown.
closeDelay
and openDelay
props can be used to control open and close delay in ms.
Note that:
- If you set
closeDelay={0}
then menu will close before user will reach dropdown, setoffset={0}
to remove space between target element and dropdown - Menu with
trigger="hover"
is not accessible – users that navigate with keyboard will not be able to use it
Disabled items
Dropdown position
Transitions
Menu dropdown can be animated with any of premade transitions from Transition component:
Custom component as Menu.Item
By default, Menu.Item
renders as button element, to change that set component
prop:
Custom component as target
Styles API
You can use the following data- attributes to customize menu styles:
data-expanded
– added to target element when menu is opened (see previous demo)data-hovered
– added to item when it is hovered with mouse or selected with up/down arrows
Accessibility
Menu follows WAI-ARIA recommendations:
- Dropdown element has
role="menu"
andaria-labelledby="target-id"
attributes - Target element has
aria-haspopup="menu"
,aria-expanded
,aria-controls="dropdown-id"
attributes - Menu item has
role="menuitem"
attribute
Supported target elements
Uncontrolled Menu with trigger="click"
(default) will be accessible only when used with button
element or component that renders it (Button, ActionIcon, etc.).
Other elements will not support Space
and Enter
key presses.
Hover menu
Menu with trigger="hover"
is not accessible – it cannot be accessed with keyboard,
use it only if you do not care about accessibility.
Keyboard interactions
Key | Description | Condition |
---|---|---|
Escape | Closes dropdown | Focus within dropdown |
Space/Enter | Opens/closes dropdown | Focus on target element |
ArrowUp | Moves focus to previous menu item | Focus within dropdown |
ArrowDown | Moves focus to next menu item | Focus within dropdown |
Home | Moves focus to first menu item | Focus within dropdown |
End | Moves focus to last menu item | Focus within dropdown |
Menu component props
Name | Type | Description |
---|---|---|
arrowOffset | number | Arrow offset |
arrowPosition | "center" | "side" | Arrow position * |
arrowRadius | number | Arrow border-radius |
arrowSize | number | Arrow size |
children | ReactNode | Menu content |
clickOutsideEvents | string[] | Events that trigger outside clicks |
closeDelay | number | Close delay in ms, applicable only to trigger="hover" variant |
closeOnClickOutside | boolean | Determines whether dropdown should be closed on outside clicks, default to true |
closeOnEscape | boolean | Determines whether dropdown should be closed when Escape key is pressed, defaults to true |
closeOnItemClick | boolean | Determines whether Menu should be closed when item is clicked |
defaultOpened | boolean | Uncontrolled menu initial opened state |
disabled | boolean | If set, popover dropdown will not render |
id | string | id base to create accessibility connections |
keepMounted | boolean | If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead |
loop | boolean | Determines whether arrow key presses should loop though items (first to last and last to first) |
middlewares | PopoverMiddlewares | Floating ui middlewares to configure position handling |
offset | number | FloatingAxesOffsets | Default Y axis or either (main, cross, alignment) X and Y axis space between target element and dropdown |
onChange | (opened: boolean) => void | Called when menu opened state changes |
onClose | () => void | Called when Menu is closed |
onOpen | () => void | Called when Menu is opened |
onPositionChange | (position: FloatingPosition) => void | Called when dropdown position changes |
openDelay | number | Open delay in ms, applicable only to trigger="hover" variant |
opened | boolean | Controlled menu opened state |
portalProps | Omit<PortalProps, "children" | "withinPortal"> | Props to pass down to the portal when withinPortal is true |
position | "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | Dropdown position relative to target |
positionDependencies | any[] | useEffect dependencies to force update dropdown position |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
returnFocus | boolean | Determines whether focus should be automatically returned to control when dropdown closes, false by default |
shadow | MantineShadow | Key of theme.shadow or any other valid css box-shadow value |
transitionProps | Partial<Omit<TransitionProps, "mounted">> | Props added to Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: 'fade' } by default |
trigger | "click" | "hover" | Event which should open menu |
width | PopoverWidth | Dropdown width, or 'target' to make dropdown width the same as target element |
withArrow | boolean | Determines whether component should have an arrow |
withinPortal | boolean | Determines whether dropdown should be rendered within Portal, defaults to false |
zIndex | ZIndex | Dropdown z-index |
MenuItem component props
Name | Type | Description |
---|---|---|
children | ReactNode | Item label |
closeMenuOnClick | boolean | Determines whether menu should be closed when item is clicked, overrides closeOnItemClick prop on Menu component |
color | MantineColor | Key of theme.colors |
icon | ReactNode | Icon rendered on the left side of the label |
rightSection | ReactNode | Section rendered on the right side of the label |
MenuDropdown component props
Name | Type | Description |
---|---|---|
children | ReactNode | Item label |
MenuTarget component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Target element |
refProp | string | Key of the prop that should be used to get element ref |
Menu component Styles API
Name | Static selector | Description |
---|---|---|
dropdown | .asuikit-Menu-dropdown | Menu.Dropdown element |
label | .asuikit-Menu-label | Menu.Label root element |
item | .asuikit-Menu-item | Menu.Item root element |
arrow | .asuikit-Menu-arrow | Menu.Dropdown arrow |
divider | .asuikit-Menu-divider | Menu.Divider root element |
itemIcon | .asuikit-Menu-itemIcon | Menu.Item icon |
itemLabel | .asuikit-Menu-itemLabel | Menu.Item label |
itemRightSection | .asuikit-Menu-itemRightSection | Menu.Item right section |