Multi-Account Switcher Dropdown Menu for Vue

Q: What does the closed button show?

An outline Button, w-64 with h-auto so two lines fit, holding a size-6 Avatar, Personal Account over m@example.com, and an up-down chevron at the end.

Q: How wide is the menu compared with the button?

Both are w-64, and the menu lines up with the button's start edge, so they match. positioning with placement bottom-start on DropdownMenu sets that; the default is bottom-end.

Q: What if the personal photo is missing?

AvatarFallback shows CN instead. Acme Corp and Startup Inc have no image at all, so they always show AC and ST.

An account switcher whose button shows the current account, with every account and its email in the menu and Add Account at the end.

Ark UI

The button shows Personal Account, its email, and a chevron. The menu lists that account with a check, plus Acme Corp and Startup Inc with their emails, then Add Account.

Use it when someone works in more than one account and the current name should stay visible. Adding an account is a separate step. Open it in a Dialog. In Vue, Ark UI does not switch 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 :positioning='{ placement: "bottom-start" }'>
  <DropdownMenuTrigger :asChild="true">
    <Button class="h-auto w-64 justify-between py-2" variant="outline">
      <span class="flex items-center gap-2">
        <Avatar class="size-6">
          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <span class="flex flex-col items-start">
          <span class="font-medium text-sm">Personal Account</span>
          <span class="text-muted-foreground text-xs">m@example.com</span>
        </span>
      </span>
      <ChevronsUpDownIcon aria-hidden="true" class="opacity-50" data-icon="inline-end" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-64">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Accounts</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem value="personal-account">
        <Avatar>
          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <span class="flex flex-col">
          <span class="font-medium text-sm">Personal Account</span>
          <span class="text-muted-foreground text-xs">m@example.com</span>
        </span>
        <CheckIcon aria-hidden="true" class="ms-auto" />
      </DropdownMenuItem>
<!-- The rest of the file is under Installation. -->

FAQ

What does the closed button show?

An outline Button, w-64 with h-auto so two lines fit, holding a size-6 Avatar, Personal Account over m@example.com, and an up-down chevron at the end.

How wide is the menu compared with the button?

Both are w-64, and the menu lines up with the button's start edge, so they match. positioning with placement bottom-start on DropdownMenu sets that; the default is bottom-end.

What accounts are listed?

Under an Accounts label and a separator: Personal Account (m@example.com), Acme Corp (team@acme.com) and Startup Inc (hello@startup.io). Each row is a DropdownMenuItem with an avatar and two lines of text. Add Account follows the last separator.

How is the current account marked?

A check icon at the end of the Personal Account row, pushed there with ms-auto. The demo hardcodes it; render it on whichever account is active, and say so in text too, since the icon is aria-hidden.

What if the personal photo is missing?

AvatarFallback shows CN instead. Acme Corp and Startup Inc have no image at all, so they always show AC and ST.

How do I switch accounts when a row is chosen?

Switch where your library reports the chosen row; the menu closes on its own. Listen to @select on DropdownMenu. It receives details.value, such as acme-corp.

API Reference

Sets positioning="{ placement: bottom-start }", asChild, value="personal-account", value="acme-corp", value="startup-inc" and value="add-account". The rest is on the Dropdown Menu page.