Profile Dropdown with Avatar Dropdown Menu for Svelte

Q: 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.

Q: 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.

Q: 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.

Q: 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.

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

Ark UI

A round avatar button opens the user's name and email, then Profile, Settings, Help, and a destructive Log out.

Use it in a navbar when account commands should stay hidden until asked. Destructive only colors Log out. Confirm in an Alert Dialog before signing out. In Svelte, Ark UI does not end the session.

PreviewCode

Installation

MCP · Pro

Make your AI a shadcn expert

Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.

Get MCP See plans

Part of Pro

Anatomy

Usage

<DropdownMenu><DropdownMenuTrigger>{#snippet asChild(props)}<Button {...props({ "aria-label": "Open account menu" })} pill size="icon-lg" variant="ghost"><Avatar><AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" /><AvatarFallback>CN</AvatarFallback></Avatar></Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="w-56"><DropdownMenuGroup><DropdownMenuLabel class="font-normal"><div class="flex flex-col gap-1"><p class="font-medium text-foreground text-sm leading-none">shadcn</p><p class="text-muted-foreground text-xs leading-none">m@example.com</p></div></DropdownMenuLabel><DropdownMenuSeparator /><DropdownMenuItem value="profile"><UserIcon aria-hidden="true" />Profile</DropdownMenuItem><DropdownMenuItem value="settings"><SettingsIcon aria-hidden="true" />Settings</DropdownMenuItem><DropdownMenuItem value="help"><CircleHelpIcon aria-hidden="true" />Help</DropdownMenuItem></DropdownMenuGroup><DropdownMenuSeparator /><DropdownMenuItem value="log-out" variant="destructive"><LogOutIcon aria-hidden="true" />Log out</DropdownMenuItem></DropdownMenuContent></DropdownMenu>

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.

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 onSelect on DropdownMenu. It receives details.value, such as log-out.

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.