Skip to content
Apps Platform

Menu

The Menu component is designed to render a list of MenuItem components, providing a dropdown menu interface for users to select an option or take an action. The MenuItem component is used within Menu to create individual menu items, ensuring each item adheres to the specified menu style. The MenuTrigger component is used to render a trigger element that opens the Menu when clicked.

Usage Guidelines

Provide a clear and concise label for the MenuTrigger to indicate the purpose of the dropdown menu. Use the Menu component to group related MenuItem components together, ensuring that each item is easily accessible and distinguishable.

<MenuTrigger>
  <Button>Open Menu</Button>
  <Menu>
    <MenuItem id="duplicate">Duplicate</MenuItem>
    <MenuItem id="save">Save</MenuItem>
  </Menu>
</MenuTrigger>

Props

interface MenuTriggerProps
trigger ? MenuTriggerType

How the menu is triggered.

Defaults to 'press'
isOpen ? boolean

Whether the overlay is open by default (controlled).

defaultOpen ? boolean

Whether the overlay is open by default (uncontrolled).

onOpenChange ? (isOpen: boolean) => void

Handler that is called when the overlay's open state changes.

interface MenuProps
className ? string

Optional class name to apply to the menu.

children ReactNode

The children to render in the menu.

disabledKeys ? (string | number)[] =>

Optional array of keys to disable.

onAction (key: string | number) => void

Handler that is called when an item is selected.

interface MenuItemProps
isDisabled ? boolean

Whether the menu item is disabled.

title ? string

Optional title to apply to the menu item.

Defaults to
children ReactNode

The children to render in the menu item.

id ? Key

The unique id of the item.

value ? object

The object value that this item represents. When using dynamic collections, this is set automatically.

textValue ? string

A string representation of the item's contents, used for features like typeahead.

onAction ? () => void

Handler that is called when the item is selected.

className ? ClassNameOrFunction

The CSS className for the element. A function may be provided to compute the class based on component state.

style ? StyleOrFunction

The inline style for the element. A function may be provided to compute the style based on component state.

href ? string

A URL to link to. See MDN.

hrefLang ? string

Hints at the human language of the linked URL. SeeMDN.

target ? HTMLAttributeAnchorTarget

The target window for the link. See MDN.

rel ? string

The relationship between the linked resource and the current page. See MDN.

download ? string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.

ping ? string

A space-separated list of URLs to ping when the link is followed. See MDN.

referrerPolicy ? HTMLAttributeReferrerPolicy

How much of the referrer to send when following the link. See MDN.

routerOptions ? undefined

Options for the configured client side router.

onHoverStart ? (e: HoverEvent) => void

Handler that is called when a hover interaction starts.

onHoverEnd ? (e: HoverEvent) => void

Handler that is called when a hover interaction ends.

onHoverChange ? (isHovering: boolean) => void

Handler that is called when the hover state changes.

onPress ? (e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStart ? (e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEnd ? (e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChange ? (isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUp ? (e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

onClick ? (e: MouseEvent) => void

Not recommended – use onPress instead. onClick is an alias for onPress provided for compatibility with other libraries. onPress provides additional event details for non-mouse interactions.