Account Menu Dropdown React component
The menu behind an app's avatar, done properly: profile header with plan, a custom status with emoji, availability that recolors the avatar dot, a workspace switcher, shortcuts for each item, an appearance switch that really changes the theme, a confirm step before signing out, and full keyboard support with type-ahead.
About the Account Menu Dropdown component
Account Menu Dropdown is everything people reach for behind their avatar: who they're signed in as, their status, which workspace they're in, settings, the theme and signing out.
It is built like a real menu. Arrow keys move, typing a letter jumps to an item, Escape closes the innermost part first and focus returns to the avatar. Status and availability update the avatar right away, the appearance switch recolors the interface, and signing out asks once before it happens.
When to use it
Use it in the top bar of dashboards, SaaS apps and internal tools where people have a profile, settings and possibly several workspaces.
Keep the item list short; move rarely used settings into the settings page itself.
Installation
Add the Account Menu Dropdown component to your project with the shadcn CLI. It lands in components/account-menu-dropdown.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/account-menu-dropdownOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<AccountMenuDropdown /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| user | { name: string; email: string; plan: string } | { name: "Lena Brandt", email: "lena@nexora.io", plan: "Team" } |
| workspaces | { id: string; name: string; color: string; role: string }[] | WORKSPACES |
| defaultOpen | boolean | true |
| onAction | (action: string) => void | — |
| onSignOut | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- user{ name: string; email: string; plan: string }Default: { name: "Lena Brandt", email: "lena@nexora.io", plan: "Team" }
- workspaces{ id: string; name: string; color: string; role: string }[]Default: WORKSPACES
- defaultOpenbooleanDefault: true
- onAction(action: string) => void
- onSignOut() => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Account Menu Dropdown FAQ
- How do I wire up the menu items?
- onAction receives the item id (profile, settings, billing, shortcuts, help, new-workspace). Navigate or open a dialog there. onSignOut runs after the confirm step.
- Does the appearance switch work?
- Inside the block it recolors everything immediately. In your app, store the choice and apply it to your theme provider; System should follow prefers-color-scheme.
- Which keys work?
- ArrowUp and ArrowDown move, Home and End jump, typing letters finds an item, ArrowRight opens the workspace list, Enter activates and Escape closes the editor, the list and then the menu.
- Can I start with it closed?
- Yes. Pass defaultOpen={false}; it opens from the avatar and focuses the first item.
- Is it accessible?
- It uses menu, menuitem and menuitemradio roles with aria-checked, the trigger has aria-expanded and announces availability, the sign-out confirmation is an alertdialog that focuses Cancel, and focus returns to the trigger when the menu closes.
