Account Settings Dropdown Dropdown Menu for Ark UI

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. End alignment is DropdownMenu's default bottom-end placement.

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, Ark 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 asChild>
    <Button variant="outline">
      <Avatar className="size-6">
        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      shadcn
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent 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>
{/* 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. End alignment is DropdownMenu's default bottom-end placement.

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.

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.

How do I run code when a row is chosen?

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 payment-methods.

API Reference

Sets asChild, value="profile-settings", value="email-preferences", value="notifications", value="privacy-security" and value="payment-methods". The rest is on the Dropdown Menu page.