Menu

Click-triggered dropdown menu. Built on top of aurora's Popper primitive — same placement options, same overlay behavior. Use for action menus, command lists, contextual options, and any list of actions tied to a button.

Aurora ships two trigger styles out of the box:

• <MenuButton> — a split button: a main action button plus a separate chevron trigger that opens the menu.
• <PopperTrigger> (from @scaler-tech/aurora/popper) — wrap any element to make it the menu trigger.

For the menu surface, <MenuItems> provides the styled container; populate it with <MenuItem> entries, optional <MenuSection> headings, and <MenuSeparator> dividers.

Basic — split button trigger

MenuButton is a split button: clicking the label emits click; clicking the chevron opens the menu. Use this when the trigger has a default action and a dropdown of variants.

<Menu>
  <MenuButton @click="onSave">Save</MenuButton>
  <MenuItems>
    <MenuItem>Save and close</MenuItem>
    <MenuItem>Save as draft</MenuItem>
    <MenuSeparator />
    <MenuItem danger>Discard changes</MenuItem>
  </MenuItems>
</Menu>

Custom trigger — PopperTrigger

When the menu has no main action (it's purely a dropdown), use PopperTrigger to wrap any element. Aurora's Button is a common choice.

<Menu>
  <PopperTrigger>
    <Button variant="secondary" trailing-icon="chevron-down">Actions</Button>
  </PopperTrigger>
  <MenuItems>
    <MenuItem icon="document-duplicate">Duplicate</MenuItem>
    <MenuItem icon="arrow-down-tray">Export</MenuItem>
    <MenuSeparator />
    <MenuItem icon="trash" danger>Delete</MenuItem>
  </MenuItems>
</Menu>

Items with icons

<MenuItem icon="document-plus">New</MenuItem>
<MenuItem icon="folder-open">Open</MenuItem>

Sectioned

MenuSection is a slot-only component — its content is rendered as a heading above the items grouped after it. There is no title prop; pass the heading text as the slot.

<MenuItems>
  <MenuSection>Sort by</MenuSection>
  <MenuItem icon="bars-arrow-up">Name (A→Z)</MenuItem>
  <MenuItem icon="clock">Recently updated</MenuItem>
  <MenuSeparator />
  <MenuSection>Filter</MenuSection>
  <MenuItem>Active only</MenuItem>
</MenuItems>

Active item

Mark the currently-applied option to highlight it in the menu.

<MenuItem active>Compact</MenuItem>
<MenuItem>Comfortable</MenuItem>

Disabled menu / disabled items

<Menu disabled>…</Menu>
<MenuItem disabled>Locked</MenuItem>

Auto-close on item click

Clicking a MenuItem automatically closes the menu via aurora's popper context — you don't need to call close() yourself. If you need to prevent closing (e.g. multi-select within a menu), use a custom <div> instead of <MenuItem> inside <MenuItems>.

Menu — Props

Prop	Type	Default	Description
placement	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'	'bottom-end'	Anchor side of the menu relative to the trigger.
offset	[number, number]	[0, 4]	[mainAxis, crossAxis] offset from the anchor.
disabled	boolean	false	Disable opening.

MenuButton — Props and Events

Prop	Type	Default	Description
variant	'primary' | 'secondary'	'primary'	Visual style.
size	'sm' | 'md' | 'lg'	'md'	Button height.

Event	Description
click	Emitted when the main (label) button is clicked. The chevron half opens the menu and does not emit this event.

MenuItem — Props and Events

Prop	Type	Default	Description
icon	IconName	—	Leading icon.
danger	boolean	false	Apply destructive (red) styling.
active	boolean	false	Highlight the item as currently selected.
disabled	boolean	false	Disable the item; click is suppressed and the menu does not close.

Event	Description
click	Emitted when the item is clicked (only if not disabled). The menu closes automatically afterward.

MenuItems

Container for menu entries. Slot-only (no props). Provides:

• the styled popover surface (white bg, 1px border, shadow, rounded)
• vertical layout for entries
• { isOpen, close, open } slot props for advanced flows

<MenuItems v-slot="{ close }">
  <MenuItem @click="doThing">Do thing</MenuItem>
  <MenuItem @click="() => { customAction(); close() }">Custom action</MenuItem>
</MenuItems>

MenuSection

Slot-only. Renders the slot content as a small bold heading above the entries grouped after it.

<MenuSection>Sort by</MenuSection>

MenuSeparator

Slot-less. Renders a thin horizontal divider between groups.

<MenuSeparator />