User Menu

The account button for a header or sidebar footer. The identity is repeated inside the panel, because on a collapsed rail the trigger is a bare avatar.

src/components/ui/user-menu.tsx

About

From the component's own source, where it was written.

The account button in a header or sidebar footer.

Composed from DropdownMenu rather than reimplementing a popover, so the keyboard behaviour and dismissal come from the component that already gets them right.

The identity is repeated inside the panel. On a collapsed sidebar the trigger is a bare avatar, and a menu that opens with no indication of *whose* account it belongs to is a real hazard on shared machines.

Metrics follow the shared menu grid: gap-2 and a square 8px inset, the same as menuItem and SidebarMenuButton. With a 32px avatar that gives a 48px row, so the trigger lines up with the rows it sits among rather than being a few pixels off from all of them.

Install

npx astralyx-ui add user-menu

Usage

import { UserMenu } from '@/components/ui/user-menu'

<UserMenu name="Ada Lovelace" email="ada@astralyx.dev" plan="Team" actions={actions} />

Composer

Change the props and the source below follows.

Props

compact

tsx

<UserMenu
  name="Ada Lovelace"
  email="ada@astralyx.dev"
  plan="Team plan"
  compact={false}
  actions={actions}
/>

Examples

Account

tsx

<UserMenu name="Ada Lovelace" email="ada@astralyx.dev" actions={actions} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`UserMenu`

The account button in a header or sidebar footer.

Extends Omit<ComponentProps<'button'>, 'onSelect'>.

Prop	Type	Default	Description
name	string	required	Shown on the trigger and repeated in the panel.
email	string	—	Shown on the trigger and repeated in the panel.
plan	ReactNode	—	Shown on the trigger and repeated in the panel.
avatar	ReactNode	—	—
actions	UserMenuAction[]	required	`{ id, label, icon?, shortcut?, destructive?, separatorBefore?, onSelect? }`.
compact	boolean	false	Avatar only, for a collapsed rail. The name stays as the accessible label.
align	'start' \| 'center' \| 'end'	'start'	—

Types

`UserMenuAction`

Field	Type	Description
id	string	—
label	ReactNode	—
icon?	ReactNode	—
shortcut?	string	—
destructive?	boolean	—
separatorBefore?	boolean	—
onSelect?	() => void	—

Behaviour

Topic	Detail	Description
composition	DropdownMenu	Built on it rather than reimplementing a popover, so dismissal and keyboard behaviour come from the component that already handles them.