Organisms

Account menu

The avatar dropdown at the far right of the TopBar. Opens a 288px panel with the user card, profile actions, impersonation, and update/logout.

Updated Sep 1, 2026 by Juan Pablo Turina

Live preview

import { AccountMenu } from "@/components/organisms/account-menu";

<AccountMenu />

Anatomy

The trigger is a size-8 avatar circle + CaretDown. Clicking opens an animate-dialog-in panel below it. The panel is split into four vertically-stacked blocks separated by borders.

  1. 1
    Avatar trigger

    Circular size-8 tile with the user's initial. CaretDown next to it flips 180° when open.

  2. 2
    User card block

    First block. A bordered card that repeats the avatar, name (semibold), and email (muted). Identity only — no actions.

  3. 3
    Profile actions

    Your profile · Settings · Privacy. Each row is a MenuItem: light icon (User/Gear/ShieldCheck) + label.

  4. 4
    Impersonation

    Separator + single Impersonation row (Detective icon). Access is gated in the real Dashboard.

  5. 5
    System actions

    Separator + Update to latest version (ArrowClockwise) and Log out (SignOut). Log out is always the last row.

When to use

  • Inside the TopBar of any Dashboard-adjacent prototype.
  • Anywhere the user needs profile-level actions (settings, accounts, impersonation).

When not to use

  • For app switchers between orgs/accounts — use GlobalChip instead.
  • For notifications — use a Popover triggered by the bell icon.

Usage

Do
  • Keep the four-block layout (user card · profile · impersonation · system).
  • Keep the user card identity-only — profile actions belong in the block below.
  • Log out is the last action, always. Never nest it inside another group.
  • Close the menu on selection — never leave it open after an action commits.
Don't
  • Don't add environment or org switching here — that's GlobalChip.
  • Don't fold Log out into a submenu — visibility matters for safety.
  • Don't use dividers to imply hierarchy; blocks + borders express the grouping.

Composition

AccountMenu is self-contained (owns its open state and click-outside behavior). Drop it inside the TopBar right slot, or standalone in any header row.

Custom user identity.
<AccountMenu
  userName="Julián Núñez"
  userEmail="julian@y.uno"
  initial="J"
/>