User Menu
Avatar-trigger popover whose menu rows are supplied by the caller via an `items` prop. Designed for top-bar slots where space is tight. Opens downward and right-aligned by default; closes on outside-click and Escape.
Open down
Open up
Add 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/andromeda-user-menuProps
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. |
| status | 'online'|'caution'|'fault'|'offline' | - | Presence state; passed to Avatar for the status dot. |
| avatarSize | 'sm'|'md'|'lg' | 'md' | Size of the trigger avatar. |
| 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