Menu Preview

A menu is a hidden list of options that is shown when someone interacts with a trigger component, like a button, an avatar, or an icon.

Usually, the options in a menu initiate an immediate action or navigate someone to a new context. If you need to collect information from people, try a select, dropdown, or combobox instead.

Open in CodeSandbox

Menu storybook
React guidance

Menu pattern
WAI guidance

Properties

checkedValues

Map of all checked values

Record<string, string[]>

Default:

none

children

Can contain two children including {@link MenuTrigger} and {@link MenuPopover}. Alternatively can only contain {@link MenuPopover} if using a custom target .

(Element | [Element, Element]) & ReactNode

Default:

none

closeOnScroll

Close when scroll outside of it

boolean

Default:

false

defaultCheckedValues

Default values to be checked on mount

Record<string, string[]>

Default:

none

defaultOpen

Whether the popup is open by default

boolean

Default:

false

hasCheckmarks

States that menu items can contain selectable items and reserve slots for item alignment

boolean

Default:

none

hasIcons

States that menu items can contain icons and reserve slots for item alignment

boolean

Default:

none

hoverDelay

Sets the delay for mouse open/close for the popover one mouse enter/leave

number

Default:

none

inline

Root menus are rendered out of DOM order on document.body , use this to render the menu in DOM order This option is disregarded for submenus

boolean

Default:

false

mountNode

Where the portal children are mounted on DOM

HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined

Default:

a new element on document.body without any styling

onCheckedValueChange

Callback when checked items change for value with a name

((e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void)

event React’s original SyntheticEvent

data A data object with relevant information

Default:

none

onOpenChange

Call back when the component requests to change value The open value is used as a hint when directly controlling the component

((e: MouseEvent | React.MouseEvent<...> | KeyboardEvent<HTMLElement> | TouchEvent, data: MenuOpenChangeData) => void)

Default:

none

open

Whether the popup is open

boolean

Default:

false

openOnContext

Opens the menu on right click (context menu), removes all other menu open interactions

boolean

Default:

false

openOnHover

Opens the menu on hover

boolean

Default:

false

persistOnItemClick

Do not dismiss the menu when a menu item is clicked

boolean

Default:

false

positioning

Configures the positioned menu

PositioningShorthand

Default:

none