Navigation

AccountMenu

The avatar button at the end of an app header. It opens a menu that starts with who is signed in, then your items: profile, settings, sign out.

import { AccountMenu, MenuItem, MenuSeparator } from '@alea-design/ui';

Examples

Account menu

The avatar is the button. The menu starts with who is signed in, then your items. onAction gets the id of the item.

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-text…
--alea-text-muted…

Space

--alea-space-0-5…
--alea-space-3…

Type

--alea-font-family-body…
--alea-font-size-md…
--alea-font-size-sm…
--alea-font-weight-semibold…

Props

`AccountMenu` props

Show 3 inherited props

The avatar button at the end of a header that opens the account menu: who is signed in on top, then profile, settings and sign out.

Prop	Type	Default	Description
`children`required	`ReactNode \| ((item: object) => ReactNode)`		The MenuItems, MenuSections and MenuSeparators: profile, settings, sign out.
`name`required	`string`		The person's name: the avatar's initials and the first line of the menu header.
`aria-label`	`string`	`"{name}, account menu"`	Name of the menu button. Default "{name}, account menu".
`className`	`string`	none	Extra class names for the popup.
`footer`	`ReactNode`	none	Content under the items, not focusable: a version, a hint.
`maxHeight`	`number`	none	Most height before it scrolls, in px.
`menuProps`	`Omit<MenuProps<object>, "children">`	none	Menu props: onAction, selectionMode, selectedKeys, items, disabledKeys...
`minWidth`	`string \| number`	`200`	Least width of the menu, any CSS length. Default 200 px.
`motion`	`MotionProp`	none	How the popup enters and leaves: a preset (fade, scale, pop, slide-down, blur...), false for none, or options.
`onAction`	`((key: string \| number) => void)`	none	Called with the menu item's id.
`placement`	`"start" \| "end" \| "bottom end" \| "bottom start" \| "bottom" \| "top" \| "bottom left" \| "bottom right" \| "top left" \| "top right" \| "top start" \| "top end" \| "l…`	`"bottom end"`	Where it opens. Default bottom start.
`secondary`	`ReactNode`	none	A second line in the menu header: an email or a role.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the button: sm 32, md 40 (default, as the other header buttons), lg 48.
`src`	`string`	none	The photo. Initials show without it.
`style`	`CSSProperties`	none	Inline style for the popup.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

Variants: placementstartendbottom endbottom startbottomtopbottom leftbottom righttop lefttop righttop starttop endl…
sizesmmdlg
Motion: Takes a motion prop for its entrance and exit.
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-account-menu.alea-account-head.alea-account-text.alea-account-name.alea-account-secondary

The avatar is a real button named "{name}, account menu"; set aria-label to change it.
The menu is a menu button: arrows move, Escape closes and focus goes back to the avatar.
Who is signed in is shown in the menu header as text, not in the button, so it is read when the menu opens.

Keyboard

Key	Does
`Enter` or `Space`	Opens the menu from the avatar
`Up` or `Down arrow`	Previous or next item
`Esc`	Closes the menu and returns to the avatar

Do and don't

Keep it to five items or fewer: profile, settings, help, sign out.
Put sign out last, after a separator.
Use the same size as the other header buttons (the default, 40 px).

Don't

Don't use it as a workspace switcher: use WorkspaceSwitcher in the sidebar.
Don't put the person's name in the button next to the avatar: the header gets crowded.