Menu · paneui

Installation

pnpm dlx shadcn@latest add @paneui/menu

Usage

import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "@/components/ui/menu"

<Menu>
  <MenuTrigger render={<Button variant="secondary" />}>Options</MenuTrigger>
  <MenuContent>
    <MenuItem>Rename</MenuItem>
    <MenuItem>Duplicate</MenuItem>
    <MenuSeparator />
    <MenuItem variant="destructive">Delete</MenuItem>
  </MenuContent>
</Menu>

Composition

Menu
├── MenuTrigger
└── MenuContent
    ├── MenuGroup
    │   ├── MenuLabel
    │   └── MenuItem
    │       └── MenuShortcut
    ├── MenuCheckboxItem
    ├── MenuRadioGroup
    │   └── MenuRadioItem
    ├── MenuSeparator
    └── MenuSub
        ├── MenuSubTrigger
        └── MenuSubContent

Examples

Checkbox Items

Radio Items

Disabled and Destructive

Inset

RTL

Keyboard

Arrow keys move the highlight, Enter or Space selects, ArrowRight opens a submenu and ArrowLeft or Esc closes it. Typing a letter jumps to the matching item.

Motion

Popups scale from 95% at the trigger's edge over 200ms. Checkbox and radio indicators pop in with a short scale.

API Reference

Built on the Menu primitive. Only the props this library adds or changes are listed; everything else passes through.

Re-export of the primitive root. Also accepts every prop of Menu.Root.

open: boolean; Controlled open state.
onOpenChange: (open: boolean, eventDetails) => void; Called when the menu opens or closes.

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean, eventDetails) => void	—	Called when the menu opens or closes.

MenuTrigger

Re-export. Use render to make a Button the trigger. Also accepts every prop of Menu.Trigger.

MenuContent

Portal, positioner and popup in one. Also accepts every prop of Menu.Popup.

side= "bottom": "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end"; Side of the trigger to open on.
sideOffset= 6: number; Gap from the trigger in px.
align= "start": "start" | "center" | "end"; Alignment against the trigger.
alignOffset= 0: number; Shift along the alignment axis in px.

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"	"bottom"	Side of the trigger to open on.
sideOffset	number	6	Gap from the trigger in px.
align	"start" \| "center" \| "end"	"start"	Alignment against the trigger.
alignOffset	number	0	Shift along the alignment axis in px.

MenuItem

Also accepts every prop of Menu.Item.

variant= "default": "default" | "destructive"; destructive tints the text, icon and highlight red.
inset= false: boolean; Left padding that matches items with an icon.
disabled= false: boolean; Dim the item and skip it.
closeOnClick= true: boolean; Close the menu when the item is chosen.

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	`destructive` tints the text, icon and highlight red.
inset	boolean	false	Left padding that matches items with an icon.
disabled	boolean	false	Dim the item and skip it.
closeOnClick	boolean	true	Close the menu when the item is chosen.

data-highlighted: Present on the item under the pointer or keyboard focus.
data-variant: default or destructive.

Data attribute	Description
data-highlighted	Present on the item under the pointer or keyboard focus.
data-variant	`default` or `destructive`.

MenuCheckboxItem

Item with a check indicator in the left gutter. Also accepts every prop of Menu.CheckboxItem.

checked: boolean; Controlled checked state.
defaultChecked= false: boolean; Initial state when uncontrolled.
onCheckedChange: (checked: boolean, eventDetails) => void; Called when toggled.
closeOnClick= false: boolean; Close the menu when toggled.

Prop	Type	Default	Description
checked	boolean	—	Controlled checked state.
defaultChecked	boolean	false	Initial state when uncontrolled.
onCheckedChange	(checked: boolean, eventDetails) => void	—	Called when toggled.
closeOnClick	boolean	false	Close the menu when toggled.

MenuRadioGroup

Re-export. Holds the selected value for its MenuRadioItems. Also accepts every prop of Menu.RadioGroup.

value: any; Controlled selected value.
defaultValue: any; Initial value when uncontrolled.
onValueChange: (value: any, eventDetails) => void; Called when the selection changes.

Prop	Type	Default	Description
value	any	—	Controlled selected value.
defaultValue	any	—	Initial value when uncontrolled.
onValueChange	(value: any, eventDetails) => void	—	Called when the selection changes.

MenuRadioItem

Item with a primary dot indicator in the left gutter. Also accepts every prop of Menu.RadioItem.

value*: any; Value selected by this item.

Prop	Type	Default	Description
value*	any	—	Value selected by this item.

MenuGroup

Re-export. Groups items under a MenuLabel. Also accepts every prop of Menu.Group.

MenuLabel

Small muted heading for a group. Must sit inside a MenuGroup. Also accepts every prop of Menu.GroupLabel.

inset= false: boolean; Indent to match inset items.

Prop	Type	Default	Description
inset	boolean	false	Indent to match inset items.

MenuSeparator

Also accepts every prop of Menu.Separator.

MenuShortcut

Right-aligned monospace key hint inside an item. Also accepts every prop of span.

MenuSub

Re-export. Root of a nested menu. Also accepts every prop of Menu.SubmenuRoot.

MenuSubTrigger

Item that opens the submenu, with a trailing chevron. Also accepts every prop of Menu.SubmenuTrigger.

data-popup-open: Present while its submenu is open.

Data attribute	Description
data-popup-open	Present while its submenu is open.

MenuSubContent

MenuContent preset to open on the right, aligned to the trigger item. Also accepts every prop of MenuContent.

side= "right": same as MenuContent
sideOffset= 4: number
alignOffset= -6: number; Lines the first item up with the trigger.

Prop	Type	Default	Description
side	same as MenuContent	"right"
sideOffset	number	4
alignOffset	number	-6	Lines the first item up with the trigger.