Menu

A dropdown menu of actions or links, opened from an icon button (more_horiz by default) or any trigger you pass. Options use the same shape and row layout as List: label, description, icon, swatch, disabled, href and to, plus danger for destructive actions. Built on reka-ui's DropdownMenu, so arrow keys move between options, typing jumps to one, and Escape closes it.

The dropdown itself loads the first time a Menu mounts; the trigger renders immediately, and a click made before the dropdown arrives still opens it.

To open a menu from a List row or header, use List's item-menu and header-menu (see List: Menus).

Examples

Actions

select fires with the chosen option and its index. Give the default trigger an accessible name with label.

Last choice: none

<Menu
  label="Scenario actions"
  :items="[
    { value: 'rename', label: 'Rename', icon: 'edit' },
    {
      value: 'export',
      label: 'Export',
      icon: 'download',
      description: 'CSV of every output',
    },
    { value: 'archive', label: 'Archive', disabled: true },
    { value: 'delete', label: 'Delete', icon: 'delete', danger: true },
  ]"
  @select="(option) => run(option.value)"
/>

Custom trigger

The trigger slot replaces the icon button; pass a single focusable element. align (start, center, end; default end) and side place the dropdown against it.

<Menu
  align="start"
  description-position="end"
  swatch-position="end"
  :items="[
    { value: 'cases', label: 'Cases', description: '1,204', swatch: '#1f77b4' },
    {
      value: 'hosp',
      label: 'Hospitalizations',
      description: '87',
      swatch: '#ff7f0e',
    },
    {
      value: 'docs',
      label: 'Documentation',
      icon: 'help',
      href: 'https://github.com/CDCgov/cfa-simulator',
    },
  ]"
>
  <template #trigger>
    <Button variant="neutral">Series</Button>
  </template>
</Menu>

Like List, the start, text and end slots ({ item, index }) replace the icon/swatch, the text, and the end of each option.

Model

Name	Type
v-model:open	boolean

Props

Prop	Type	Required	Default
items	MenuOption[]	Yes	—
icon	string	No	"more_horiz"
label	string	No	—
disabled	boolean	No	—
align	"start" | "center" | "end"	No	"end"
side	"top" | "right" | "bottom" | "left"	No	"bottom"
swatchPosition	ListSwatchPosition	No	"start"
descriptionPosition	ListDescriptionPosition	No	"below"

Events

Event	Payload
select	item: MenuOption, index: number