Skip to content

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

Free

Overflow Menu Button Group for React

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

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 React, Base UI does not decide which actions overflow.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="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>
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <Button
            aria-label="More actions"
            size="icon-sm"
            variant="outline"
          />
        }
      >
        <MoreHorizontalIcon aria-hidden="true" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuItem>Archive</DropdownMenuItem>
        <DropdownMenuItem>Export</DropdownMenuItem>
      </DropdownMenuContent>
{/* 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. DropdownMenuTrigger passes it in render.

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.

Dropdown Menu

Sets align="end". The rest is on the Dropdown Menu page.

All 39 button group examples