Menu

Structured actions in a dropdown list

import { Menu } from "@plexui/ui/components/Menu";

Examples

Overview

Natural sizing

Checkbox items

indicatorPosition
indicatorVariant

Radio items

indicatorPosition

Item actions

Reference

Note: Menu prevents Tab from advancing focus. For generic popover content use Popover instead.

Menu (root)

PropTypeDefaultDescription
forceOpenbooleanKeep menu open (controlled)
onOpen() => voidCalled when menu opens
onClose() => voidCalled when menu closes
modalbooleanWhether menu is modal (focus trap)

Menu.Trigger — The element that toggles the menu (e.g. a Button). No specific props.

Menu.Content

PropTypeDefaultDescription
widthnumber | stringPanel width (px or CSS value)
minWidthnumber | stringautoMinimum panel width
side"top" | "right" | "bottom" | "left"Preferred placement
align"start" | "center" | "end"Alignment relative to trigger

Menu.Item — List item. Use onSelect for actions; omit for non-interactive content.

PropTypeDefaultDescription
onSelect(event: Event) => voidCalled when item is selected
disabledbooleanDisable the item

Menu.Link — Item that navigates (uses your app link component). Pass href and link props.

Menu.Separator — Divider between items. No props.

Menu.Sub / Menu.SubTrigger / Menu.SubContent — Submenu wrapper, trigger, and content panel.

Menu.CheckboxItem

PropTypeDefaultDescription
checkedbooleanChecked state
onCheckedChange(checked: boolean) => voidWhen checkbox toggles
onSelect(event: Event) => voidUse with preventDefault() to keep menu open
indicatorPosition"start" | "end"Checkbox position
indicatorVariantstringBadge/indicator style (e.g. solid)

Menu.RadioGroup / Menu.RadioItem — Radio group: value, onChange; RadioItem: value, disabled.

Menu.ItemActions / Menu.ItemAction — ItemActions wraps hover actions; ItemAction accepts onClick.