User Menu
Opens the account menu from the signed-in user's avatar.
Configurations
Supported configurations for this component.
Configurations
4 examplesAdd to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
UserMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | Stable key for the row, falling back to its array index. |
| label | string | - | Text shown on the menu item, rendered uppercase. |
| icon | React.ComponentType<{ size?: number, weight?: string }> | - | Icon component rendered before the label. |
| onSelect | () => void | - | Handler called when the item is chosen; the menu closes after. |
| destructive | boolean | - | Renders the item in the destructive red color. |
| type | 'separator' | - | Set to 'separator' to render a divider instead of an item. |
UserMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| namereq | string | - | Display name; passed to Avatar for the initial fallback. |
| src | string | - | Avatar image URL. |
| lightSrc | string | - | Light-theme version of `src`; passed to Avatar, which shows `src` in dark and `lightSrc` in light. |
| status | 'online'|'caution'|'fault'|'offline' | - | Presence state; passed to Avatar for the status dot. |
| size | 'sm'|'md'|'lg' | 'md' | Scales the whole trigger: box height on the shared control ladder (28/32/40), avatar (24/32/40) inside it, side padding, gap and chevron. The popover rows follow the same rung. Replaces the older `avatarSize` prop, which scaled only the avatar; a copy still passing `avatarSize` renders md. |
| itemsreq | UserMenuItem[] | - | The menu rows to render, including separators. |
| placement | 'top'|'bottom' | 'bottom' | Whether the panel opens below or above the trigger. |
| align | 'start'|'end' | 'end' | Which trigger edge the panel aligns to horizontally. |
| defaultOpen | boolean | false | Render the menu pre-opened (showcases / docs). Outside-click and Escape still dismiss it. |
| staticOpen | boolean | false | Render pre-opened AND pinned; outside-click / Escape do not dismiss it. For showcases / docs where several popovers are shown open at once and one must not close the others. |
| ariaLabel | string | 'User menu' | Accessible label for the trigger button and menu panel. |
| className | string | - | Class name applied to the wrapper element. |
| style | React.CSSProperties | - | Inline styles merged onto the wrapper element. |
AI Canvas