Bronze UI

Overview

Menus reveal a short list of contextual actions, such as editing an item. They help users make a single selection without leaving the current context.

<Menu.Root>
	<Menu.Trigger render={<Button label="Open" priority="primary" />} />
	<Menu.Content>
		<Menu.Item>Cut</Menu.Item>
		<Menu.Item>Copy</Menu.Item>
		<Menu.Item>Paste</Menu.Item>
		<Menu.Separator />
		<Menu.Item>Find</Menu.Item>
		<Menu.Submenu>
			<Menu.SubmenuTrigger>Share</Menu.SubmenuTrigger>
			<Menu.SubmenuContent>
				<Menu.Item>Editor</Menu.Item>
				<Menu.Item>Messages</Menu.Item>
				<Menu.Item>Notes</Menu.Item>
				<Menu.Item>Reminders</Menu.Item>
			</Menu.SubmenuContent>
		</Menu.Submenu>
		<Menu.Separator />
		<Menu.Item tone="danger">Delete</Menu.Item>
	</Menu.Content>
</Menu.Root>

API Reference

`Menu.Root`

Provides menu state and context for all nested menu parts.

Prop	Type	Default
`children`	`ReactNode`	-
`open`	`boolean`	-
`defaultOpen`	`boolean`	-
`onOpenChange`	`(open: boolean) => void`	-

`Menu.Trigger`

Interactive trigger element that opens the menu.

Prop	Type	Default
`render`	`ReactElement`	-
`children`	`ReactNode`	-
`disabled`	`boolean`	`false`

`Menu.Content`

Portal-rendered popup container for menu items and sections.

Prop	Type	Default
`children`	`ReactNode`	-

`Menu.Item`

Selectable action item inside a menu.

Prop	Type	Default
`children`	`ReactNode`	-
`tone`	`"danger"`	-
`disabled`	`boolean`	`false`
`onSelect`	`() => void`	-

`Menu.Separator`

Visual divider used to separate groups of related menu items.

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

`Menu.RadioGroup`

Manages a single selected value across nested radio items.

Prop	Type	Default
`value`	`string`	-
`defaultValue`	`string`	-
`onValueChange`	`(value: string) => void`	-
`children`	`ReactNode`	-

`Menu.RadioItem`

Radio-style menu item that participates in Menu.RadioGroup.

Prop	Type	Default
`value`	`string`	-
`children`	`ReactNode`	-
`disabled`	`boolean`	`false`

`Menu.Submenu`

Creates a nested menu scope under a parent menu.

Prop	Type	Default
`children`	`ReactNode`	-
`open`	`boolean`	-
`defaultOpen`	`boolean`	-
`onOpenChange`	`(open: boolean) => void`	-

`Menu.SubmenuTrigger`

Trigger row that opens a submenu from within a menu.

Prop	Type	Default
`children`	`ReactNode`	-
`disabled`	`boolean`	`false`

`Menu.SubmenuContent`

Popup container for submenu items.

Prop	Type	Default
`children`	`ReactNode`	-

Examples

Sections

Menu items can be separated from each other by using <Menu.Separator />. Separating destructive or less-frequent actions helps reduce accidental clicks and adds a subtle layer of safety.

<Menu.Root>
	<Menu.Trigger render={<Button priority="primary" icon={<MoreVerticalIcon />} aria-label="Open menu" />} />
	<Menu.Content>
		<Menu.Item>Duplicate</Menu.Item>
		<Menu.Item>Archive</Menu.Item>
		<Menu.Separator />
		<Menu.Item tone="danger">Delete</Menu.Item>
	</Menu.Content>
</Menu.Root>

Overview

Components