Account Settings Dropdown Dropdown Menu for React

Q: What does the account button show?

An outline Button with a size-6 Avatar and the name, shadcn. The menu is w-64 and lines up with the end of the button. align="end" on DropdownMenuContent sets it.

Q: What is the block at the top of the menu?

A DropdownMenuLabel with font-normal that holds a size-10 avatar, the name and m@example.com. It sits in its own DropdownMenuGroup, isn't focusable and can't be picked.

Q: How are Account and Billing split?

Two DropdownMenuGroups, each starting with its DropdownMenuLabel, with a DropdownMenuSeparator between them. Account holds Profile Settings, Email Preferences, Notifications and Privacy & Security; Billing holds Payment Methods and Team Subscription.

Q: How is Log out marked?

variant="destructive" on its DropdownMenuItem, after the last separator. It only colors the row: sign out, or confirm first, in its handler.

An account menu opened from the user's avatar and name, with a profile header, Account and Billing groups, and log out.

The button shows an avatar and the user's name. The menu repeats a larger avatar and the email, then Account and Billing groups, and a destructive Log out.

Use it when account and billing commands should stay off the page until asked. If signing out needs a confirm, use an Alert Dialog. 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 variant="outline" />}>
    <Avatar className="size-6">
      <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    shadcn
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end" className="w-64">
    <DropdownMenuGroup>
      <DropdownMenuLabel className="font-normal">
        <div className="flex items-center gap-3 pb-2">
          <Avatar className="size-10">
            <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
          <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>
        </div>
      </DropdownMenuLabel>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Account</DropdownMenuLabel>
      <DropdownMenuItem>
{/* The rest of the file is under Installation. */}

FAQ

What does the account button show?

An outline Button with a size-6 Avatar and the name, shadcn. The menu is w-64 and lines up with the end of the button. align="end" on DropdownMenuContent sets it.

What is the block at the top of the menu?

A DropdownMenuLabel with font-normal that holds a size-10 avatar, the name and m@example.com. It sits in its own DropdownMenuGroup, isn't focusable and can't be picked.

How are Account and Billing split?

Two DropdownMenuGroups, each starting with its DropdownMenuLabel, with a DropdownMenuSeparator between them. Account holds Profile Settings, Email Preferences, Notifications and Privacy & Security; Billing holds Payment Methods and Team Subscription.

Which icon goes with which row?

A user icon for Profile Settings, mail for Email Preferences, a bell for Notifications, a lock for Privacy & Security, a card for Payment Methods, people for Team Subscription and a log out arrow for Log out. All are aria-hidden.