MoreMenu

Icon-only overflow menu for secondary actions. Wraps DropdownMenu with an IconButton using the moreHorizontal glyph — pass the same sections shape as other menus.

Examples

Default

A compact trigger with a short item list, including an optional danger action.

import { MoreMenu } from '@var-ui/react';

<MoreMenu sections={[{ items: [{ id: 'edit', label: 'Edit' }] }]} />

Overflow item set

Use denser overflow lists for share / duplicate / archive / delete patterns in toolbars and cards.

import { MoreMenu } from '@var-ui/react';

<MoreMenu
  aria-label="Row actions"
  sections={[
    {
      items: [
        { id: 'share', label: 'Share' },
        { id: 'duplicate', label: 'Duplicate' },
        { id: 'archive', label: 'Archive' },
        { id: 'delete', label: 'Delete', danger: true },
      ],
    },
  ]}
/>

Props

Accessibility

The trigger is an IconButton, so aria-label defaults to “More options” (override with the aria-label prop). Menu keyboard behavior matches DropdownMenu. Prefer MoreMenu when the primary actions stay visible and only secondary commands hide behind overflow.