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.

Loading...

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