Profile with Preferences Dropdown Menu for Vue

Q: What is the trigger?

A round ghost Button (pill, size="icon-lg") holding the user's Avatar, with aria-label set to Open account menu.

Q: What is in the header, and where does the menu open?

A DropdownMenuLabel with the name, shadcn, over m@example.com. The menu is w-64 and lines up with the end of the avatar button, since the avatar usually sits at the end of a navbar.

A profile menu with Profile and Settings links and three preference toggles you can flip from the menu.

Ark UI

The avatar opens the name and email, Profile and Settings, three checkbox preferences, and a destructive Log out. The toggles are email, push, and auto-save.

Use it when a few settings are flipped often enough to sit in the account menu. Put rare ones on the page with a Switch. In Vue, Ark UI does not save those ticks or sign the user out.

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 aria-label="Open account menu" :pill="true" size="icon-lg" variant="ghost">
      <Avatar>
        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-64">
    <DropdownMenuGroup>
      <DropdownMenuLabel class="font-normal">
        <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>
      </DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem value="profile">
        <UserIcon aria-hidden="true" />Profile
      </DropdownMenuItem>
      <DropdownMenuItem value="settings">
        <SettingsIcon aria-hidden="true" />Settings
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Quick Preferences</DropdownMenuLabel>
      <DropdownMenuCheckboxItem
        :checked="emailNotifications"
        @checked-change="setEmailNotifications"
<!-- The rest of the file is under Installation. -->

FAQ

Which quick preferences start on?

Email Notifications and Auto-save start checked; Push Notifications starts off. Each row keeps its own state, so any of them can be on together. Each DropdownMenuCheckboxItem takes :checked, a value, and @checked-change, which receives a boolean.

What are the rows that are not checkboxes?

Profile and Settings, under the header, and Log out at the end with variant="destructive". They're plain items with an aria-hidden icon each.

What is the trigger?

A round ghost Button (pill, size="icon-lg") holding the user's Avatar, with aria-label set to Open account menu.

What is in the header, and where does the menu open?

A DropdownMenuLabel with the name, shadcn, over m@example.com. The menu is w-64 and lines up with the end of the avatar button, since the avatar usually sits at the end of a navbar.

Does the menu stay open while I toggle preferences?

It depends on the library; each has a setting to change it. A checkbox row closes the menu. Set closeOnSelect to false on it to keep the menu open.

Do the preference ticks stay after the menu closes?

Yes. The checked state lives in the demo's component, not in the menu, so it's still there when the menu reopens. Save it to the user's settings when it changes so it survives a reload.

API Reference

Sets asChild, value="profile", value="settings", checked="emailNotifications", checked-change="setEmailNotifications" and value="email-notifications". The rest is on the Dropdown Menu page.