Components

Pass the button to Menu.Trigger with render. Menu.Content wraps the portal, positioner and popup, and opens below the trigger, aligned to its start edge. Give each item an icon and, where a key binding exists, a shortcut. Put a destructive action last, after a separator, with intent='danger'.

<Menu>
  <Menu.Trigger render={<IconButton aria-label='More actions'><DotsThreeIcon weight='bold' className='size-4' /></IconButton>} />
  <Menu.Content>
    <Menu.Item icon={<PencilSimpleIcon weight='bold' />} shortcut='⌘E'>Edit</Menu.Item>
    <Menu.Item icon={<CopyIcon weight='bold' />} shortcut='⌘D'>Duplicate</Menu.Item>
    <Menu.Item href='https://example.com/events/neon-harbour-sessions' icon={<ArrowSquareOutIcon weight='bold' />}>View on site</Menu.Item>
    <Menu.Separator />
    <Menu.Item intent='danger' icon={<XCircleIcon weight='bold' />}>Cancel event</Menu.Item>
  </Menu.Content>
</Menu>

Links

Give Menu.Item an href, like every Roadie link, and it renders as a link. Internal paths route through RoadieLinkProvider, and external URLs open in a new tab. The menu closes when a link is followed.

<Menu>
  <Menu.Trigger render={<Button>Go to<CaretDownIcon weight='bold' className='size-4' /></Button>} />
  <Menu.Content>
    <Menu.Item href='/components/menu#links'>Orders</Menu.Item>
    <Menu.Item href='/components/menu#links'>Attendees</Menu.Item>
    <Menu.Item href='https://example.com/help'>Help centre</Menu.Item>
  </Menu.Content>
</Menu>

Groups

Menu.Group with a Menu.GroupLabel names a set of related items. Screen readers announce the label as the group's name.

<Menu>
  <Menu.Trigger render={<Button>Export</Button>} />
  <Menu.Content>
    <Menu.Group>
      <Menu.GroupLabel>Attendees</Menu.GroupLabel>
      <Menu.Item icon={<DownloadIcon weight='bold' />}>Download CSV</Menu.Item>
      <Menu.Item icon={<EnvelopeIcon weight='bold' />}>Email to me</Menu.Item>
    </Menu.Group>
    <Menu.Separator />
    <Menu.Group>
      <Menu.GroupLabel>Sales</Menu.GroupLabel>
      <Menu.Item icon={<DownloadIcon weight='bold' />}>Download CSV</Menu.Item>
    </Menu.Group>
  </Menu.Content>
</Menu>

Checkbox items

Menu.CheckboxItem toggles a setting on and off and shows a check when on. The menu stays open, so people can change several at once.

function ColumnsMenu() {
  const [columns, setColumns] = useState({ venue: true, date: true, sold: false })
  const toggle = (key) => (checked) => setColumns((current) => ({ ...current, [key]: checked }))

  return (
    <Menu>
      <Menu.Trigger render={<Button>Columns</Button>} />
      <Menu.Content>
        <Menu.Group>
          <Menu.GroupLabel>Show columns</Menu.GroupLabel>
          <Menu.CheckboxItem checked={columns.venue} onCheckedChange={toggle('venue')}>Venue</Menu.CheckboxItem>
          <Menu.CheckboxItem checked={columns.date} onCheckedChange={toggle('date')}>Date</Menu.CheckboxItem>
          <Menu.CheckboxItem checked={columns.sold} onCheckedChange={toggle('sold')}>Tickets sold</Menu.CheckboxItem>
        </Menu.Group>
      </Menu.Content>
    </Menu>
  )
}

render(<ColumnsMenu />)

Radio items

Menu.RadioGroup holds one choice from a set. Each Menu.RadioItem takes a value.

<Menu>
  <Menu.Trigger render={<Button>Sort</Button>} />
  <Menu.Content>
    <Menu.RadioGroup defaultValue='date'>
      <Menu.GroupLabel>Sort by</Menu.GroupLabel>
      <Menu.RadioItem value='date'>Event date</Menu.RadioItem>
      <Menu.RadioItem value='name'>Name</Menu.RadioItem>
      <Menu.RadioItem value='sold'>Tickets sold</Menu.RadioItem>
    </Menu.RadioGroup>
  </Menu.Content>
</Menu>

Submenu

Wrap a Menu.SubmenuTrigger and its own Menu.Content in Menu.SubmenuRoot. The submenu opens beside its trigger on hover, click or the arrow key, with its first item level with the trigger.

<Menu>
  <Menu.Trigger render={<IconButton aria-label='More actions'><DotsThreeIcon weight='bold' className='size-4' /></IconButton>} />
  <Menu.Content>
    <Menu.Item icon={<PencilSimpleIcon weight='bold' />}>Edit</Menu.Item>
    <Menu.Item icon={<CopyIcon weight='bold' />}>Duplicate</Menu.Item>
    <Menu.SubmenuRoot>
      <Menu.SubmenuTrigger icon={<ShareNetworkIcon weight='bold' />}>Share</Menu.SubmenuTrigger>
      <Menu.Content>
        <Menu.Item icon={<LinkSimpleIcon weight='bold' />}>Copy link</Menu.Item>
        <Menu.Item icon={<EnvelopeIcon weight='bold' />}>Email</Menu.Item>
      </Menu.Content>
    </Menu.SubmenuRoot>
    <Menu.Separator />
    <Menu.Item intent='danger' icon={<XCircleIcon weight='bold' />}>Cancel event</Menu.Item>
  </Menu.Content>
</Menu>

Placement

side and align on Menu.Content place the menu. Align to end when the trigger sits at the right of a row, so the menu opens back over the row.

<div className='flex flex-wrap gap-3'>
  <Menu>
    <Menu.Trigger render={<Button>Align end</Button>} />
    <Menu.Content align='end'>
      <Menu.Item>Edit</Menu.Item>
      <Menu.Item>Duplicate</Menu.Item>
    </Menu.Content>
  </Menu>
  <Menu>
    <Menu.Trigger render={<Button>Side top</Button>} />
    <Menu.Content side='top'>
      <Menu.Item>Edit</Menu.Item>
      <Menu.Item>Duplicate</Menu.Item>
    </Menu.Content>
  </Menu>
</div>

States

Disable an item that can't run right now. It stays in place, so the menu doesn't change shape, and keyboard focus skips over it.

<Menu>
  <Menu.Trigger render={<Button>Actions</Button>} />
  <Menu.Content>
    <Menu.Item icon={<PencilSimpleIcon weight='bold' />}>Edit</Menu.Item>
    <Menu.Item icon={<DownloadIcon weight='bold' />} disabled>Download tickets</Menu.Item>
    <Menu.Separator />
    <Menu.Item intent='danger' icon={<TrashIcon weight='bold' />}>Delete draft</Menu.Item>
  </Menu.Content>
</Menu>

Guidelines

Keep a menu to actions

Use a menu for actions on one thing, like an event row, and for view settings like columns and sort order.

Don’t

Don't use a menu to pick a form value. Use a Select, which shows the chosen value and works inside a Field.

Order by use, danger last

<Menu.Separator />
<Menu.Item intent='danger'>Cancel event</Menu.Item>

Put the most used action first. Separate a destructive action and put it last, in the danger intent.

Don’t

Don't run a destructive action straight from the menu when it can't be undone. Open a Dialog to confirm it.

Label the trigger

<IconButton aria-label='More actions'>…</IconButton>

Give an icon-only trigger an aria-label that says what the menu holds.

Don’t

Don't nest more than one level of submenu. Deep menus are hard to steer with a pointer and hard to follow with a screen reader.

Accessibility

The trigger is a button with aria-haspopup='menu' and aria-expanded. The popup has the menu role and items have menuitem, menuitemcheckbox or menuitemradio.
Enter, Space or the down arrow opens the menu from the trigger. The arrow keys move between items, Home and End jump to the first and last, and typing a letter jumps to the next item that starts with it.
The right arrow opens a submenu and the left arrow closes it. These follow the reading direction.
Escape closes the menu and returns focus to the trigger.
Shortcuts are visual hints and stay out of the item's name. Bind the keys yourself.

API reference

defaultOpenboolean: Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.
Defaults to false.
loopFocusboolean: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
Defaults to true.
highlightItemOnHoverboolean: Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
Defaults to true.
modalboolean: Determines if the menu enters a modal state when open. - `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. Nested menus ignore this prop, and menus opened by hover are never modal.
Defaults to true.
onOpenChange((open: boolean, eventDetails: MenuRootChangeEventDetails) => void): Event handler called when the menu is opened or closed.
onOpenChangeComplete((open: boolean) => void): Event handler called after any animations complete when the menu is opened or closed.
openboolean: Whether the menu is currently open.
orientation"horizontal" | "vertical": The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.
Defaults to 'vertical'.
disabledboolean: Whether the component should ignore user interaction.
Defaults to false.
closeParentOnEscboolean: When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
Defaults to false.
actionsRefRefObject<MenuRootActions | null>: A ref to imperative actions. - `unmount`: Manually unmounts the menu. Call this after any externally controlled closing animation finishes. - `close`: When specified, the menu can be closed imperatively.
triggerIdstring | null: ID of the trigger that the menu is associated with. This is useful in conjunction with the `open` prop to create a controlled menu. There's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set).
defaultTriggerIdstring | null: ID of the trigger that the menu is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open menu.
handleMenuHandle<unknown>: A handle to associate the menu with a trigger. If specified, allows external triggers to control the menu's open state.
childrenReactNode | PayloadChildRenderFunction<unknown>: The content of the menu. This can be a regular React node or a render function that receives the `payload` of the active trigger.

Menu.CheckboxItem

classNamestring | ((state: MenuCheckboxItemState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.
iconReactNode: Pass a bold Phosphor icon; it is sized for you.
shortcutReactNode: e.g. `⌘D`. Visual only; bind the keys yourself.

Inherited from MenuCheckboxItemProps

checkedboolean: Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.
defaultCheckedboolean: Whether the checkbox item is initially ticked. To render a controlled checkbox item, use the `checked` prop instead.
Defaults to false.
onCheckedChange((checked: boolean, eventDetails: MenuRootChangeEventDetails) => void): Event handler called when the checkbox item is ticked or unticked.
onClick((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void): The click handler for the menu item.
disabledboolean: Whether the component should ignore user interaction.
Defaults to false.
labelstring: Overrides the text label to use when the item is matched during keyboard text navigation.
idstring: @ignore
closeOnClickboolean: Whether to close the menu when the item is clicked.
Defaults to false.

Inherited from NonNativeButtonProps

nativeButtonboolean: Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
Defaults to false.

Menu.Content

classNamestring | ((state: MenuPopupState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.
side"top" | "bottom" | "left" | "right" | "inline-start" | "inline-end": Defaults to 'bottom', or 'inline-end' in a submenu.
align"center" | "start" | "end": Defaults to 'start'.
sideOffsetnumber: Gap between trigger and menu, in px.
Defaults to 8, or 4 in a submenu.
alignOffsetnumber: Shift along the trigger's edge, in px.
Defaults to 0, or -4 in a submenu.

Inherited from MenuPopupProps

idstring: @ignore
finalFocusboolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null): Determines the element to focus when the menu is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.

Menu.Group

classNamestring | ((state: MenuGroupState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.

Inherited from MenuGroupProps

childrenReactNode: The content of the component.

Menu.GroupLabel

No additional props. It forwards all standard HTML attributes to the underlying element.

Menu.Item

iconReactNode: Pass a bold Phosphor icon; it is sized for you.
shortcutReactNode: e.g. `⌘D`. Visual only; bind the keys yourself.
hrefstring: Makes the row a link. Internal paths route through `RoadieLinkProvider`; external URLs open in a new tab.
intent"neutral" | "brand" | "brand-secondary" | "accent" | "danger" | "success" | "warning" | "info": `danger` for a destructive action.
classNamestring

Inherited from MenuItemProps

labelstring: Overrides the text label to use when the item is matched during keyboard text navigation.
idstring: @ignore
onClick((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void): The click handler for the menu item.
disabledboolean: Whether the component should ignore user interaction. A disabled link row can't be followed.
Defaults to false.
closeOnClickboolean: Whether to close the menu when the item is clicked.
Defaults to true.

Menu.Popup

classNamestring | ((state: MenuPopupState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.

Inherited from MenuPopupProps

idstring: @ignore
finalFocusboolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null): Determines the element to focus when the menu is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.

Menu.Portal

classNamestring | ((state: MenuPortalState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.

Inherited from MenuPortalProps

keepMountedboolean: Whether to keep the portal mounted in the DOM while the popup is hidden.
Defaults to false.
containerHTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null: A parent element to render the portal element into.

Menu.Positioner

classNamestring | ((state: MenuPositionerState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.

Inherited from MenuPositionerProps

align"center" | "start" | "end": How to align the popup relative to the specified side. Submenus and menubars default to `'start'`.
Defaults to start.
side"top" | "bottom" | "left" | "right" | "inline-start" | "inline-end": Which side of the anchor element to align the popup against. May automatically change to avoid collisions. Submenus and vertical menubars default to `'inline-end'`.
Defaults to 'bottom'.

Inherited from UseAnchorPositioningSharedParameters

sideOffsetnumber | OffsetFunction: Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner sideOffset={({ side, align, anchor, positioner }) => { return side === 'top' || side === 'bottom' ? anchor.height : anchor.width; }} /> ```
Defaults to 0.
alignOffsetnumber | OffsetFunction: Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner alignOffset={({ side, align, anchor, positioner }) => { return side === 'top' || side === 'bottom' ? anchor.width : anchor.height; }} /> ```
Defaults to 0.
anchorElement | VirtualElement | RefObject<Element | null> | (() => Element | VirtualElement | null) | null: An element to position the popup against. By default, the popup will be positioned against the trigger.
positionMethod"absolute" | "fixed": Determines which CSS `position` property to use.
Defaults to 'absolute'.
collisionBoundaryBoundary: An element or a rectangle that delimits the area that the popup is confined to.
Defaults to 'clipping-ancestors'.
collisionPaddingPadding: Additional space to maintain from the edge of the collision boundary.
Defaults to 5.
stickyboolean: Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.
Defaults to false.
arrowPaddingnumber: Minimum distance to maintain between the arrow and the edges of the popup. Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
Defaults to 5.
disableAnchorTrackingboolean: Whether to disable the popup from tracking any layout shift of its positioning anchor.
Defaults to false.
collisionAvoidanceCollisionAvoidance: Determines how to handle collisions when positioning the popup. `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`): - `'flip'`: keep the requested side when it fits; otherwise try the opposite side (`top` and `bottom`, or `left` and `right`). - `'shift'`: never change side; keep the requested side and move the popup within the clipping boundary so it stays visible. - `'none'`: do not correct side-axis overflow. `align` controls overflow on the alignment axis (`start`/`center`/`end`): - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows. - `'shift'`: keep side and requested alignment, then nudge the popup along the alignment axis to fit. - `'none'`: do not correct alignment-axis overflow. `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: - `'start'`: allow perpendicular fallback and try the logical start side first (`top` before `bottom`, or `left` before `right` in LTR). - `'end'`: allow perpendicular fallback and try the logical end side first (`bottom` before `top`, or `right` before `left` in LTR). - `'none'`: do not fallback to the perpendicular axis. When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`. If `align` is omitted, it defaults to `'flip'`. @example ```jsx <Positioner collisionAvoidance={{ side: 'shift', align: 'shift', fallbackAxisSide: 'none', }} /> ```

Menu.RadioGroup

classNamestring | ((state: MenuRadioGroupState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.

Inherited from MenuRadioGroupProps

childrenReactNode: The content of the component.
valueany: The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.
defaultValueany: The uncontrolled value of the radio item that should be initially selected. To render a controlled radio group, use the `value` prop instead.
onValueChange((value: any, eventDetails: MenuRootChangeEventDetails) => void): Function called when the selected value changes.
disabledboolean: Whether the component should ignore user interaction.
Defaults to false.

Menu.RadioItem

classNamestring | ((state: MenuRadioItemState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.
iconReactNode: Pass a bold Phosphor icon; it is sized for you.
shortcutReactNode: e.g. `⌘D`. Visual only; bind the keys yourself.

Inherited from MenuRadioItemProps

valueany Required: Value of the radio item. This is the value that will be set in the MenuRadioGroup when the item is selected.
onClick((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void): The click handler for the menu item.
disabledboolean: Whether the component should ignore user interaction.
Defaults to false.
labelstring: Overrides the text label to use when the item is matched during keyboard text navigation.
idstring: @ignore
closeOnClickboolean: Whether to close the menu when the item is clicked.
Defaults to false.

Inherited from NonNativeButtonProps

nativeButtonboolean: Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
Defaults to false.

Menu.Separator

classNamestring | ((state: SeparatorState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.

Inherited from SeparatorProps

orientation"horizontal" | "vertical": The orientation of the separator.
Defaults to 'horizontal'.

Menu.SubmenuRoot

Inherited from MenuSubmenuRootProps

onOpenChange((open: boolean, eventDetails: MenuRootChangeEventDetails) => void): Event handler called when the menu is opened or closed.
closeParentOnEscboolean: When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
Defaults to false.
childrenReactNode: The content of the submenu.

Inherited from MenuRootProps

disabledboolean: Whether the component should ignore user interaction.
Defaults to false.
orientation"horizontal" | "vertical": The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.
Defaults to 'vertical'.
defaultOpenboolean: Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.
Defaults to false.
loopFocusboolean: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
Defaults to true.
highlightItemOnHoverboolean: Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
Defaults to true.
onOpenChangeComplete((open: boolean) => void): Event handler called after any animations complete when the menu is opened or closed.
openboolean: Whether the menu is currently open.
actionsRefRefObject<MenuRootActions | null>: A ref to imperative actions. - `unmount`: Manually unmounts the menu. Call this after any externally controlled closing animation finishes. - `close`: When specified, the menu can be closed imperatively.

Menu.SubmenuTrigger

classNamestring | ((state: MenuSubmenuTriggerState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.
iconReactNode: Pass a bold Phosphor icon; it is sized for you.

Inherited from MenuSubmenuTriggerProps

onClick((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)
labelstring: Overrides the text label to use when the item is matched during keyboard text navigation.
idstring: @ignore
disabledboolean: Whether the component should ignore user interaction.
Defaults to false.
delaynumber: How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop.
Defaults to 100.
closeDelaynumber: How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the `openOnHover` prop.
Defaults to 0.
openOnHoverboolean: Whether the menu should also open when the trigger is hovered.
Defaults to true.

Inherited from NonNativeButtonProps

nativeButtonboolean: Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
Defaults to false.

Menu.Trigger

classNamestring | ((state: MenuTriggerState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.

Inherited from MenuTriggerProps

disabledboolean: Whether the component should ignore user interaction.
Defaults to false.
handleMenuHandle<unknown>: A handle to associate the trigger with a menu.
payloadunknown: A payload to pass to the menu when it is opened.
delaynumber: How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop.
Defaults to 100.
closeDelaynumber: How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the `openOnHover` prop.
Defaults to 0.
openOnHoverboolean: Whether the menu should also open when the trigger is hovered.

Inherited from NonNativeButtonProps

nativeButtonboolean: Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
Defaults to false.

Previous page← Drawer Next pagePopover →

Menu

Import

Examples

Default

Links

Groups

Checkbox items

Radio items

Submenu

Placement

States

Guidelines

Keep a menu to actions

Order by use, danger last

Label the trigger

Accessibility

API reference

Menu

Import

Examples

Default

Links

Groups

Checkbox items

Radio items

Submenu

Placement

States

Guidelines

Keep a menu to actions

Order by use, danger last

Label the trigger

Accessibility

API reference