Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Profile

Profile Dropdown with Avatar Dropdown Menu for React

A profile menu opened from a round avatar button, with the user's name and email above Profile, Settings, Help and Log out.

Framework
UI library

The avatar in the corner of the navbar that opens your account. This dropdown menu opens from a round ghost button holding an Avatar, shows the name and email at the top, then Profile, Settings and Help, and a destructive Log out. It fits any app with signed-in users.

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 is the profile button?

A ghost Button with pill and size="icon-lg" around the avatar, with aria-label set to Open account menu, since the picture alone has no name. DropdownMenuTrigger renders the button through render, and the avatar goes inside the trigger.

What is at the top of the menu?

A DropdownMenuLabel with font-normal holding the name, shadcn, over m@example.com. It's the label of the first DropdownMenuGroup, so screen readers announce the group by it, and it can't be focused.

Which commands follow the header?

Profile, Settings and Help, each after an aria-hidden icon, then a separator and Log out. The menu is w-56 and lines up with the end of the button.

Does the destructive variant confirm Log out?

No. variant="destructive" only colors the row. Sign out, or open an Alert Dialog first, from its handler.

How do I run Profile 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 the avatar menu from the keyboard?

Yes. Tab to the button and press Enter, Space or Arrow Down. Arrow keys move between rows, Enter picks one, and Escape closes the menu and returns focus to the avatar.

All 30 dropdown menu examples