Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Overflow Menu Button Group for Vue

Action rows that keep Copy and Edit visible and move the rest into a More menu at the end.

UI library: Ark UI

Two rows tuck extra actions into a menu. The first shows Copy, Edit, and Delete, then an icon named More actions, with Duplicate, Archive, and Export. The second shows Copy and Edit, then a More button with Delete, Archive, Move, and Share. Nothing in the menus runs.

Keep the frequent actions visible and move the rest when the row gets long. The menu is a Dropdown Menu. In Vue, Ark UI does not decide which actions overflow.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div class="flex flex-col gap-4">
  <ButtonGroup aria-label="Item actions">
    <Button size="sm" variant="outline">
      <CopyIcon aria-hidden="true" data-icon="inline-start" />Copy
    </Button>
    <Button size="sm" variant="outline">
      <Edit2Icon aria-hidden="true" data-icon="inline-start" />Edit
    </Button>
    <Button size="sm" variant="outline">
      <TrashIcon aria-hidden="true" data-icon="inline-start" />Delete
    </Button>
    <Menu :positioning='{ placement: "bottom-end" }'>
      <MenuTrigger :asChild="true">
        <Button aria-label="More actions" size="icon-sm" variant="outline">
          <MoreHorizontalIcon aria-hidden="true" />
        </Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItem value="duplicate">Duplicate</MenuItem>
        <MenuItem value="archive">Archive</MenuItem>
        <MenuItem value="export">Export</MenuItem>
      </MenuContent>
    </Menu>
  </ButtonGroup>
  <ButtonGroup aria-label="Item actions">
    <Button size="sm" variant="outline">Copy</Button>
    <Button size="sm" variant="outline">Edit</Button>
    <Menu :positioning='{ placement: "bottom-end" }'>
      <MenuTrigger :asChild="true">
        <Button size="sm" variant="outline">
          More<MoreHorizontalIcon aria-hidden="true" data-icon="inline-end" />
<!-- The rest of the file is under Installation. -->

FAQ

How does the menu trigger join the group?

The trigger is an outline Button inside the ButtonGroup, so it shares the border. MenuTrigger uses asChild around it.

What does each menu list?

The first lists Duplicate, Archive and Export. The second lists Delete, Archive, Move and Share, since Delete isn't in its row.

Where does the menu open?

Below the trigger, aligned to its end, so it doesn't run past the row.

How is the icon-only More button named?

It has aria-label="More actions" and size="icon-sm". The second trigger says More, with the icon after it.

Do the actions do anything?

No. The buttons and menu items have no handler. Run each action from its button or its menu item.

How do I decide what goes in the menu?

Keep the actions people use most as buttons and move the rest. The Dropdown Menu can hold icons, separators and a destructive item.

API Reference

Button Group

Sets aria-label="Item actions". The rest is on the Button Group page.

Button

Sets size="sm", variant="outline", aria-label="More actions" and size="icon-sm". The rest is on the Button page.

Menu

Sets positioning="{ placement: bottom-end }", asChild, value="duplicate", value="archive", value="export" and value="delete". The rest is on the Menu page.

All 39 button group examples