Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Standard

Dropdown with Groups and Labels Dropdown Menu for React

A menu split into labeled My Account and Team groups, with log out at the end.

Framework
UI library

Long menus turn into walls of options. This dropdown menu sorts its rows into two labeled groups, My Account (Profile, Billing, Settings) and Team (Team Members, Support), with a destructive Log out set apart at the end. It fits account menus, workspace menus and any menu with more than one kind of action.

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 are My Account and Team split?

Each is a DropdownMenuGroup that starts with its DropdownMenuLabel, with a DropdownMenuSeparator between them. A separator also sits under My Account's label, and another before Log out.

Which icon is on each row?

A user for Profile, a card for Billing, a gear for Settings, people for Team Members, a life buoy for Support and an arrow for Log out, each aria-hidden before the label.

How is Log out marked?

variant="destructive" on its DropdownMenuItem, outside both groups. It colors the row and doesn't confirm anything.

Is My Account a command?

No. A DropdownMenuLabel names its group: it can't be focused or picked, and the arrow keys skip it.

What does the trigger look like?

An outline Button that reads Options, with a chevron after the word. The menu is w-56.

How do I run code when a row is chosen?

The menu closes after a choice. Handle it where your library reports the chosen item. Set onClick on each DropdownMenuItem.

All 30 dropdown menu examples