Account Settings Dropdown Dropdown Menu for Vue

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.

Ark UI

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 Vue, 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 :asChild="true">
    <Button variant="outline">
      <Avatar class="size-6"><AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" /><AvatarFallback>CN</AvatarFallback></Avatar>shadcn
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-64">
    <DropdownMenuGroup>
      <DropdownMenuLabel class="font-normal">
        <div class="flex items-center gap-3 pb-2">
          <Avatar class="size-10">
            <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
          <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>
        </div>
      </DropdownMenuLabel>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Account</DropdownMenuLabel>
      <DropdownMenuItem value="profile-settings">
        <UserIcon aria-hidden="true" />Profile Settings
      </DropdownMenuItem>
      <DropdownMenuItem value="email-preferences">
        <MailIcon aria-hidden="true" />Email Preferences
      </DropdownMenuItem>
      <DropdownMenuItem value="notifications">
<!-- 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. Listen to @select 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.