Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Patterns

Overflow Menu Button Group for React

Action button groups that keep the main actions visible and move the rest into an overflow menu.

Framework
UI library

A row of actions with a More button at the end. The first group keeps Copy, Edit and Delete visible and puts Duplicate, Archive and Export behind an icon-only trigger. The second keeps only Copy and Edit, and its More trigger has a label.

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

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.

All 39 button group examples