Panel Menu

Collects a panel's secondary actions behind a kebab trigger.

Configurations

Supported configurations for this component.

Interaction states covered by the API and the style contract.

3 examples

1 example

One command adds this component to your project.

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").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

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	`PanelMenuItem[]`	-	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.

Prop	Type	Default	Description
itemsreq	`PanelMenuItem[]`	-	Entries rendered in the menu, in order.
align	`'left'\|'right'`	'right'	Edge of the trigger the menu aligns to.
size	`'sm'\|'md'\|'lg'`	'md'	Trigger size, forwarded straight to IconButton. `md` is the panel-header default. Drop to `sm` when the menu is a per-row overflow inside a dense table, where a 32px square would set the row height. The rows follow the same rung as the trigger.
ariaLabel	`string`	'Panel options'	Accessible label for the kebab trigger button and menu.
triggerIcon	`React.ComponentType`	DotsThreeVertical	The trigger's glyph. The kebab is the overflow default; pass another Phosphor icon when the menu is not an overflow, e.g. `Plus` for a menu of things to add. The trigger stays a ghost IconButton either way.
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 and renders inline under the trigger: the click-outside and Escape dismissers are not attached and the trigger cannot toggle it. For a page that documents the menu's contents; an overflow menu in an app must dismiss.
className	`string`	-	Extra class applied to the wrapper element.
style	`React.CSSProperties`	-	Inline styles merged onto the wrapper element.

Shows a payment card as the card itself, with its name, last four digits and expiry, and tilts toward the pointer.

Renders a slowly rotating particle sphere as a hero object.

Floats a panel of mixed content off a trigger, such as a picker with a setting under it.