Menu

Menu displays a floating list of actions or choices. Pass the trigger element, describe the rows with items, and handle a selected action with onSelect. Manti manages positioning, focus, keyboard navigation, and dismissal.

Use Popover instead when the floating panel contains form controls or arbitrary interactive content.

Basic usage

Start with an array of commands. Each command needs a unique value and a visible label. onSelect receives the selected value.

import { Button, Menu } from '@manti-ui/react';
import type { MenuItem } from '@manti-ui/react';
import { useState } from 'react';

const items: MenuItem[] = [
  { value: 'new', label: 'New file' },
  { value: 'open', label: 'Open…' },
  { value: 'save', label: 'Save', shortcut: '⌘S' },
];

export default function MenuBasic() {
  const [selected, setSelected] = useState('Nothing selected');

  return (
    <>
      <Menu
        trigger={<Button variant="tertiary">File</Button>}
        items={items}
        onSelect={setSelected}
      />
      <span aria-live="polite">Selected: {selected}</span>
    </>
  );
}

Add shortcut to display a keyboard hint. It only displays the hint; register the actual shortcut separately with useShortcut.

Sizes

size sets the panel's row rhythm: type, padding, and icon size. It matches the scale every other control uses, so a sm trigger can open a sm menu. Submenus inherit the size of the menu that opened them.

Groups and item states

Use a group to label related actions and a separator to divide different sets. An item can also be disabled or use tone: 'danger' for a destructive action.

Useful item properties:

• icon: leading visual affordance;
• shortcut: trailing keyboard hint;
• disabled: visible but unavailable action;
• tone: 'danger': destructive action styling;
• onSelect: handler for only that item.

Checkable items

Checkbox items represent independent settings. Radio items represent one choice from a set. Both are controlled: pass checked and update application state in onCheckedChange.

Set closeOnSelect: false when a choice should leave the menu open. Radio exclusivity comes from application state rather than the group itself.

Submenus

A submenu is another items array nested inside an item. No separate submenu component is required.

Submenus may contain more submenus. Keep every value unique across the whole tree. Selecting a leaf closes the complete tree; placement and keyboard routing are handled automatically. If the submenu label is not plain text, provide ariaLabel.

Item reference

MenuItem[] accepts these shapes:

State and events

The root onSelect observes every selectable item, including leaves inside a submenu. An item's own onSelect runs after the root handler.

The root menu is uncontrolled by default. Use open with onOpenChange only when application state must own whether it is open:

<Menu
  open={open}
  onOpenChange={setOpen}
  trigger={<Button>Account</Button>}
  items={items}
/>

itemProps adds DOM props to one item. getItemProps applies props to every action and submenu trigger. Prefer semantic properties such as disabled and tone before reaching for these lower-level escape hatches.

Menu or Popover?

Use Menu when every row is an action, checkbox, radio, or submenu trigger. Use Popover for ToggleGroup, Input, Select, Slider, forms, explanatory content, or a mixture of controls and commands.

API

Styling

Anatomy

Tokens

Last updated 13 September 2026