sheengemologic ui
All components

AccountMenu

An app-owned account identity and action menu that aligns to its topbar or sidebar placement.@gemologic/sheen-patterns · application

Playground

<ThemeProvider><AccountMenu account={{ id: "ada", name: "Ada Lovelace", items: [{ kind: "action", id: "sign-out", label: "Sign out", onSelect: () => {} }] }}  target="topbar-end"/></ThemeProvider>

Variant matrix

Topbar account
target: topbar-end
target: sidebar-header
target: sidebar-footer

Anatomy

Package
@gemologic/sheen-patterns
Source
packages/patterns/src/AccountMenu.tsx
Tokens
  • --sheen-color-bg-raised
  • --sheen-color-border-control

Accessibility

Role: button, menuKeyboard: Tab, Enter, Space, ArrowDown, ArrowUp, Escape

Do

  • Clear the model immediately when authorization changes.

Do not

  • Do not put authentication or account transport in the component.

Generated props

NameTypeDefaultDescription
account *AdminAccountModel—App-owned identity copy, optional avatar, and Sheen menu items. No authentication or fetching is performed.
target"topbar-end" | "sidebar-header" | "sidebar-footer"topbar-endSemantic chrome target controlling logical dropdown or dropup alignment.
collapsedbooleanfalseIcon-rail presentation. The composite button retains its explicit accessible name.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.