Profile Dropdown with Avatar Dropdown Menu for React

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. DropdownMenuTrigger renders the button through render, and the avatar goes inside the trigger.

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.

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 React, Base UI does not end the session.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

<DropdownMenu>
  <DropdownMenuTrigger
    render={
      <Button
        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>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end" className="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel className="font-normal">
        <div className="flex flex-col gap-1">
          <p className="font-medium text-foreground text-sm leading-none">
            shadcn
          </p>
          <p className="text-muted-foreground text-xs leading-none">
            m@example.com
          </p>
        </div>
      </DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>
        <UserIcon aria-hidden="true" />
{/* The rest of the file is under Installation. */}

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.