Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Profile

Account Settings Dropdown Dropdown Menu for React

An account menu opened from the user's avatar and name, with a profile header, Account and Billing groups, and log out.

Framework
UI library

A flat list of every account setting is hard to scan. This dropdown menu opens from a button with the user's avatar and name, shows a header with a larger avatar and the email, then splits the settings into an Account group (profile, email, notifications, privacy) and a Billing group (payment methods, team subscription), with a destructive Log out at the end. It fits SaaS dashboards and team apps.

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

What does the account button show?

An outline Button with a size-6 Avatar and the name, shadcn. The menu is w-64 and lines up with the end of the button. align="end" on DropdownMenuContent sets it.

What is the block at the top of the menu?

A DropdownMenuLabel with font-normal that holds a size-10 avatar, the name and m@example.com. It sits in its own DropdownMenuGroup, isn't focusable and can't be picked.

How are Account and Billing split?

Two DropdownMenuGroups, each starting with its DropdownMenuLabel, with a DropdownMenuSeparator between them. Account holds Profile Settings, Email Preferences, Notifications and Privacy & Security; Billing holds Payment Methods and Team Subscription.

Which icon goes with which row?

A user icon for Profile Settings, mail for Email Preferences, a bell for Notifications, a lock for Privacy & Security, a card for Payment Methods, people for Team Subscription and a log out arrow for Log out. All are aria-hidden.

How is Log out marked?

variant="destructive" on its DropdownMenuItem, after the last separator. It only colors the row: sign out, or confirm first, in its handler.

How do I run code when a row is chosen?

The menu closes after a choice. Navigate or sign out where your library reports it. Set onClick on each DropdownMenuItem.

All 30 dropdown menu examples