Components
Account menu
The menu under a signed-in person's avatar: who they are, their profile and settings, the language as a compact submenu, Sign out.
import { AccountMenu } from "@krizaka/ui/account-menu";Web only — React, from @krizaka/ui/account-menu. Beta: its API may still change in a minor version.
- Mobile · n/a. On a phone the account is a screen of the tab bar, not a menu. → Settings layout
Why it is here. Used by Orazaka, Yomizaka, Akinaza.
When to use
- The top bar of a signed-in web app, at the right.
- Any app that offers profile, settings, language and Sign out in one place.
When not to use
- For the actions of an item (edit, share, delete).Use instead: Dropdown menu
- For the navigation between the app's sections.Use instead: Nav bar
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { AccountMenu } from "@krizaka/ui/account-menu";Examples
Account menu
Identity, profile and settings links, a language submenu and Sign out.
Props
The account menu: avatar trigger → identity header, links, language submenu, Sign out.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | The trigger's accessible name (Account). |
signOutrequired | { label: string; onSelect: () => void; icon?: ReactNode; } | — | The last row: its words, what it does, an optional icon. |
avatar | Omit<AvatarProps, "size"> | — | The picture: src, or defaultAvatar ({ brand, seed }) for the product's default person. |
children | ReactNode | — | Extra rows between the language and Sign out (a theme switch…). |
className | string | — | Classes for the trigger. |
email | string | — | Their e-mail, shown under the name. |
language | AccountMenuLanguage | — | The language, as a submenu that shows the current one. |
linkAs | ElementType<any, keyof IntrinsicElements> | a | The app's link component (Next's Link); an <a> otherwise. |
links | readonly AccountMenuLink[] | [] | Where to go: profile, settings… |
name | string | — | Their name; falls back to the e-mail. |
showName | boolean | "sm" | "lg" | true | Show the name beside the avatar in the trigger: true or "sm" from 640 px, "lg" from 1024 px (the family's top
bar, where search and the counts take the room below it), false never. |
Accessibility
- The trigger is named by
label; the menu is a Radix menu (roving focus, typeahead).
Keyboard
| Keys | Action |
|---|---|
| Enter / Space / Arrow down | Opens the menu from the avatar. |
| Arrow right / Enter on Language | Opens the language choices; Arrow left or Esc goes back. |
| Esc | Closes the menu and returns the focus to the avatar. |
Best practices
- Identity first (picture, name, e-mail), then places, then preferences, then Sign out last.
- Use the product's
defaultAvatar({ brand, seed }) when there is no photo; never a grey silhouette or an initials tile. - Sign out is a quiet item: it is not a destructive action, so it is not red.
- In the family's top bar (
AppHeaderaccount),showName="lg": the name from 1024 px, where search and the counts no longer need the room.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub