Panel Menu
Kebab-trigger overflow menu for panel headers. Items can have icons, separators, and a single level of right-flyout submenu. Closes on outside click and Escape.
Default · panel actions
With submenu
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-panel-menuProps
Every prop this component accepts. Any other prop is forwarded to the underlying element.
MenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Text shown for the menu item. |
| icon | React.ComponentType<{ size?: number, weight?: string }> | - | Icon rendered to the left of the label. |
| onSelect | () => void | - | Handler called when the item is chosen (ignored on items with a submenu). |
| submenu | MenuItem[] | - | Nested items opened as a flyout submenu. |
| selected | boolean | - | Marks the item as the active choice, styling it accordingly. |
| destructive | boolean | - | Renders the item label in the destructive red color. |
| type | 'separator' | - | Set to 'separator' to render a divider rule instead of a clickable item. |
PanelMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsreq | MenuItem[] | - | Entries rendered in the menu, in order. |
| align | 'left'|'right' | 'right' | Edge of the trigger the menu aligns to. |
| ariaLabel | string | 'Panel options' | Accessible label for the kebab trigger button. |
| defaultOpen | boolean | false | Render the menu pre-opened. Useful in showcases / docs so the consumer can see the menu contents without first having to click the trigger. Click-outside and Escape still dismiss it. |
| staticOpen | boolean | false | Like defaultOpen, but the menu stays open: the click-outside and Escape dismissers are not attached. For showcases / docs where the menu must remain visible as the reader scrolls past, so the component reads as a menu without any interaction. The trigger can still toggle it. Not for product UI; a real overflow menu must dismiss. |
| className | string | - | Extra class applied to the wrapper element. |
| style | React.CSSProperties | - | Inline styles merged onto the wrapper element. |
AI Canvas