Menu

Base UICopy Anchor Link

Menu opens a list of actions or choices from a trigger click (or equivalent activation). Portal mounting, collision-aware positioning, typeahead, and roving keyboard focus ship with the compound — compose Menu.Trigger with Menu.Popup and the item parts you need.

Plain commands use Menu.Item; linked destinations use Menu.LinkItem; exclusive picks use Menu.RadioGroup with Menu.RadioItem; persistent toggles use Menu.CheckboxItem. Groups, separators, and nested Menu.Submenu trees cover denser toolbars. Triggers accept any control through render, including custom chrome such as a Surface account chip. Do not wrap Menu in Popover — Menu already owns the floating surface contract.

AnatomyCopy Anchor Link

Import the component and assemble its parts:

import { Menu } from '@viraui/react';

<Menu>
  <Menu.Trigger />
  <Menu.Popup>
    <Menu.Group>
      <Menu.Item />
      <Menu.LinkItem />
      <Menu.CheckboxItem />
    </Menu.Group>
    <Menu.Separator />
    <Menu.RadioGroup>
      <Menu.RadioItem />
    </Menu.RadioGroup>
    <Menu.Submenu>
      <Menu.SubmenuTrigger />
      <Menu.Popup />
    </Menu.Submenu>
  </Menu.Popup>
</Menu>

Menu.createHandle() stays out of the tree.

When to useCopy Anchor Link

• A short list of commands from a button, icon, or custom chip (Edit, Duplicate, Archive)
• Sort or view choices that stay selected while the menu is open
• Nested command trees or rows with destructive sentiment

When not to useCopy Anchor Link

• A richer panel with title, description, or form controls → Popover
• A brief read-only hint on hover or focus → Tooltip
• A task that should block the page → Dialog
• A closed form field that shows the current value in a trigger → Select

RelatedCopy Anchor Link

• Popover — anchored panels with chrome and interactive body content
• Tooltip — short hover/focus hints
• Dialog — modal edge sheets that interrupt the page
• Select — single-choice field with value in the trigger

Common examplesCopy Anchor Link

Row more-menuCopy Anchor Link

An IconButton more-menu on a list row is the default compact pattern. Keep a separator before the destructive row so primary commands stay grouped.

Account chipCopy Anchor Link

Use a Surface chip as the trigger when the open control is an account row. Keep the profile summary on the trigger — the popup stays a short command list.

Advanced ActionsCopy Anchor Link

Groups, checkbox view toggles, a radio sort, and a Share submenu cover denser toolbar menus. Match the trigger button style to neighbors.

Detached triggers share one menu through Menu.createHandle() when the open control sits outside the root tree.

Ask your agentCopy Anchor Link

Add a more-actions IconButton on each report row. Menu items: Rename, Duplicate, Archive, then a separator and destructive Delete. Give the button an aria-label that includes the report title.