Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Profile

Profile Dropdown with Status Dropdown Menu for React

A profile menu whose avatar shows an online dot, with a large avatar, the email and a Pro badge in the header.

Framework
UI library

A status dot tells people you're around before they message you. This dropdown menu opens from a round avatar button with an online dot, and its header shows a larger avatar, the name, the email and a Pro Badge. View Profile, Billing and Account Settings follow, then a destructive Log out. It fits chat, collaboration and community 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

How is the online dot drawn?

An AvatarBadge with bg-success inside the trigger's Avatar, which places it at the bottom end corner. Change the class for away or busy, and say the status in text too, such as in the button's aria-label, since a color alone isn't announced.

What is in the menu header?

A DropdownMenuLabel with font-normal: a size-12 avatar next to the name, shadcn, the email, m@example.com, and a secondary Badge that reads Pro. It labels the first DropdownMenuGroup and can't be focused.

What if the photo fails?

AvatarFallback shows CN in both avatars, and the online dot stays on the trigger's avatar.

Which commands are under the header?

View Profile, Billing and Account Settings, each after an aria-hidden icon, then a separator and Log out with variant="destructive". The menu is w-64 and lines up with the end of the button.

How do I run Billing or Log out?

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

Can I open this menu from the keyboard?

Yes. The trigger is a Button with aria-label set to Open account menu: Tab to it and press Enter, Space or Arrow Down. Escape closes the menu and returns focus to it.

All 30 dropdown menu examples