Account Menu
betaAn avatar that opens an account panel of collapsible sections — edit the profile, check recent orders.
- Overlays
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add account-menuNo npm packages are needed beyond what Dowel already requires.
import { AccountMenu } from "@/components/ui/account-menu";Default
Gallery
<AccountMenu>
| Prop | Type | Default |
|---|---|---|
user (required) | AccountMenuUser | — |
children (required) | ReactNode | — |
defaultOpen | boolean | — |
defaultSection | string | null | null |
onOpenChange | (open: boolean) => void | — |
onSectionChange | (section: string | null) => void | — |
open | boolean | — |
sectionThe expanded section's value, or null (controlled). | string | null | — |
triggerClassName | string | — |
triggerLabelThe trigger's accessible name. Defaults to "Account menu for <name>". | string | — |
<AccountMenuSection>
| Prop | Type | Default |
|---|---|---|
label (required) | ReactNode | — |
value (required) | string | — |
iconA leading icon. Decorative. | ReactNode | — |
Plus every attribute of <div> except title.
<AccountMenuProfileForm>
| Prop | Type | Default |
|---|---|---|
onSaveCalled with the edited user; the section then collapses. | (user: AccountMenuUser) => void | — |
saveLabel | string | "Save changes" |
Plus every attribute of <form> except onSubmit.
<AccountMenuOrders>
| Prop | Type | Default |
|---|---|---|
orders (required) | AccountMenuOrder[] | — |
onView | (orderId: string) => void | — |
Plus every attribute of <ul>.
The avatar trigger is named "Account menu for <name>" and opens Dowel's Popover: a role="dialog" labelled by the user's name, with focus moved inside, Escape and outside-press dismissal and focus returned to the trigger. It is deliberately not role="menu": sections contain form fields. Each section is a disclosure button (aria-expanded, aria-controls) revealing a named region that is inert while collapsed. Form fields are labelled; order progress bars and view buttons name their order. Transitions stop under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes