shadcn.io is not affiliated with official shadcn/ui
Dropdown Menu examples · Profile
Multi-Account Switcher Dropdown Menu for React
An account switcher whose button shows the current account, with every account and its email in the menu and Add Account at the end.
People juggle personal, work and client accounts. This dropdown menu opens from a wide button that shows the current account's avatar, name and email, and lists Personal Account, Acme Corp and Startup Inc with a check on the current one, then Add Account. It fits workspace switchers in SaaS apps, email clients and dashboards.
Preview
Installation
FAQ
What does the closed button show?
An outline Button, w-64 with h-auto so two lines fit, holding a size-6 Avatar, Personal Account over m@example.com, and an up-down chevron at the end.
How wide is the menu compared with the button?
Both are w-64, and the menu lines up with the button's start edge, so they match.
DropdownMenuContent's align defaults to start.
What accounts are listed?
Under an Accounts label and a separator: Personal Account (m@example.com), Acme Corp (team@acme.com) and Startup Inc (hello@startup.io). Each row is a DropdownMenuItem with an avatar and two lines of text. Add Account follows the last separator.
How is the current account marked?
A check icon at the end of the Personal Account row, pushed there with ms-auto. The demo hardcodes it; render it on whichever account is active, and say so in text too, since the icon is aria-hidden.
Related
- Profile Dropdown with Avatar Dropdown MenuA profile menu opened from a round avatar
- Profile Dropdown with Status Dropdown MenuA profile menu whose avatar shows an
- Account Settings Dropdown Dropdown MenuAn account menu opened from the user's
- Simple Command DialogA button that opens a command dialog with
- Avatar StandardA round avatar with a profile picture and
- Profile with Preferences Dropdown MenuA profile menu with Profile and Settings