Navigation

AccountMenu

You, at the top right of every page: your photo or initials and your first name (shortName) in a glass capsule; on phones, or with hideName, just the circle.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`name`Required	`string`
`email`	`string`
`src`	`string`
`tone`	`AvatarProps['tone']`
`items`Required	`AccountMenuGroup[]`
`shortName`	`string`	What shows beside the photo (usually the first name). Default `name`.
`hideName`	`boolean`	The photo alone, without the name beside it.
`label`	`string`	Names the button and menu for screen readers. Default "Account".
`tab`	`string`	Shows it as a TabBar tab with this label (such as "Profile"): your photo above the label, opening the same menu upward. Pass it to TabBar's `end`.
`current`	`boolean`	With `tab`: marks the tab as the current page.
`className`	`string addons?: string[]`	Add-ons you pay for ("Premium"): tags in the menu, a wand on your photo.

Guidelines

You, at the top right of every page: your photo or initials and your first name (shortName) in a glass capsule; on phones, or with hideName, just the circle. It opens a menu of what belongs to you, not to the workspace.

Provide: name, email, src (the photo, if there is one) and items (the same groups as Account's menu).

One per screen, at the top right of the page, aligned with the top of the side navigation. It stays in place as the page scrolls, beside the floating toolbar, and never covers the page title or the page's main button.
The menu opens below, right aligned, in glass. At the top: your photo, name and email. Then, in this order: Profile (user), Settings (settings), and in a group of its own, Sign out (lock, negative).
Workspaces are not in this menu; they are in WorkspaceSwitcher.
The circle is 48px (the floating toolbar's height) with a 36px avatar; hover and open add a ring in accent-visual.
Keyboard and screen readers: the same as WorkspaceSwitcher. The button is named "Account, Roger Seng".

As a tab. With tab (its label, "Profile") it renders as a TabBar tab: your photo at 24px above the label, the same menu opening upward and right aligned. Pass it as TabBar's end; set current on Profile and Settings so it takes the selected style.
On phones the tab opens your menu as a full-width bottom sheet of rows (your name and email on top, then each choice, with a check on the selected one), not a floating menu.

Row groups

A group with layout: 'row' lays its choices side by side as icons in a segmented track (Auto, Light, Dark); each item still needs a label, which names it for screen readers and shows on hover. One raised thumb slides to the chosen icon. Choosing one applies it in place and leaves the menu open, so you see the change. Keep row groups to two to four short choices.