Dropdown Menu - @ngrok/mantle

Displays a menu to the user — such as a set of actions or functions — triggered by a button. Built on top of Radix Dropdown Menu.

import { Button } from "@ngrok/mantle/button";
import { DropdownMenu } from "@ngrok/mantle/dropdown-menu";
import { Icon } from "@ngrok/mantle/icon";

<DropdownMenu.Root>
	<DropdownMenu.Trigger asChild>
		<Button appearance="filled" type="button">
			Open Menu
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content>
		<DropdownMenu.Label>corby.pickles@ngork.com</DropdownMenu.Label>
		<DropdownMenu.Separator />
		<DropdownMenu.RadioItem name="theme" value="system">
			<Icon svg={<DesktopIcon />} />
			System Preference
		</DropdownMenu.RadioItem>
		<DropdownMenu.Separator />
		<DropdownMenu.Item>
			<Icon svg={<GearIcon />} />
			User Settings
		</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item>
			<Icon svg={<SignOutIcon />} />
			Log out
		</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>;

API Reference

The DropdownMenu components are built on top of Radix Dropdown Menu.

DropdownMenu.Root

The root, stateful component that manages the open/closed state of the dropdown menu.

Prop	Type	Default	Description
`open?`	`boolean`		The controlled open state of the dropdown menu. Must be used in conjunction with `onOpenChange`.
`onOpenChange?`	`(open: boolean) => void`		Event handler called when the open state of the dropdown menu changes.
`defaultOpen?`	`boolean`	`false`	The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
`dir?`	`"ltr"` \| `"rtl"`		The reading direction of submenus when applicable.
`modal?`	`boolean`	`true`	The modality of the dropdown menu. When set to `true`, interaction with outside elements will be disabled and only menu content will be visible to screen readers.

DropdownMenu.Trigger

The trigger button that opens the dropdown menu.

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Use the `asChild` prop to compose the trigger functionality onto your own component.

DropdownMenu.Content

The container for the dropdown menu content. Appears in a portal with scrolling and animations.

All props from Radix DropdownMenu.Content, plus:

Prop	Type	Default	Description
`width?`	`"trigger"` \| `"content"`		`trigger` will ensure the dropdown content is the same width as the trigger button. `content` will make the dropdown content use the intrinsic content width.
`side?`	`"top"` \| `"right"` \| `"bottom"` \| `"left"`	`"bottom"`	The preferred side of the trigger to render against when open.
`sideOffset?`	`number`		The distance in pixels from the trigger.
`align?`	`"start"` \| `"center"` \| `"end"`	`"center"`	The preferred alignment against the trigger.
`alignOffset?`	`number`	`0`	An offset in pixels from the `start` or `end` alignment options.
`loop?`	`boolean`	`true`	When `true`, keyboard navigation will loop from last item to first, and vice versa.

DropdownMenu.Item

A standard item in the dropdown menu that can be selected or activated.

Prop	Type	Description
`inset?`	`boolean`	When `true`, adds left padding to align with items that have icons.
`disabled?`	`boolean`	When `true`, prevents the user from interacting with the item.
`onSelect?`	`() => void`	Event handler called when the user selects an item (via mouse or key).

DropdownMenu.CheckboxItem

A menu item with a checkbox that can be controlled or uncontrolled.

All props from Radix DropdownMenu.CheckboxItem, including:

Prop	Type	Description
`checked?`	`boolean` \| `"indeterminate"`	The controlled checked state of the item. Must be used with `onCheckedChange`.
`onCheckedChange?`	`(checked: boolean) => void`	Event handler called when the checked state changes.
`disabled?`	`boolean`	When `true`, prevents the user from interacting with the item.

DropdownMenu.RadioGroup

A radio group container for exclusive selection within the dropdown menu.

Prop	Type	Default	Description
`value?`	`string`		The value of the selected item in the group.
`onValueChange?`	`(value: string) => void`		Event handler called when the value changes.

DropdownMenu.RadioItem

A radio item where only one item in the group can be selected at a time.

All props from Radix DropdownMenu.RadioItem, including:

Prop	Type	Default	Description
`value`	`string`		The unique value of the item.
`disabled?`	`boolean`		When `true`, prevents the user from interacting with the item.

DropdownMenu.Label

A label for grouping and describing sections within the dropdown menu.

Prop	Type	Default	Description
`inset?`	`boolean`		When `true`, adds left padding to align with items that have icons.

DropdownMenu.Group

A group container for organizing related dropdown menu items. Accepts all props from Radix DropdownMenu.Group.

DropdownMenu.Separator

A visual separator for dividing sections within the dropdown menu. All props from Separator.

DropdownMenu.Shortcut

A keyboard shortcut indicator for dropdown menu items. All props from span.

DropdownMenu.Sub

A submenu container for creating nested dropdown menus. Accepts all props from Radix DropdownMenu.Sub.

Prop	Type	Description
`open?`	`boolean`	The controlled open state of the submenu. Must be used in conjunction with `onOpenChange`.
`onOpenChange?`	`(open: boolean) => void`	Event handler called when the open state of the submenu changes.
`defaultOpen?`	`boolean`	The open state of the submenu when it is initially rendered.

DropdownMenu.SubTrigger

The trigger item that opens a submenu when hovered or focused.

Prop	Type	Default	Description
`inset?`	`boolean`		When `true`, adds left padding to align with items that have icons.

DropdownMenu.SubContent

The content container for submenu items. Appears in a portal with scrolling and animations.

Prop	Type	Default	Description
`loop?`	`boolean`	`true`	When `true`, keyboard navigation will loop from last item to first, and vice versa.