Theme Switcher

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

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>micah@ngrok.com</DropdownMenu.Label>
		<DropdownMenu.Separator />
		<DropdownMenu.RadioItem name="theme" value="system">
			<Icon svg={<DesktopIcon />} />
			System Preference
		</DropdownMenu.RadioItem>
		<DropdownMenu.RadioItem name="theme" value="light">
			<Icon svg={<SunIcon />} />
			Light Mode
		</DropdownMenu.RadioItem>
		<DropdownMenu.RadioItem name="theme" value="dark">
			<Icon svg={<MoonIcon />} />
			Dark Mode
		</DropdownMenu.RadioItem>
		<DropdownMenu.RadioItem name="theme" value="light-high-contrast">
			<Icon svg={<SunIcon weight="fill" />} />
			Light High Contrast
		</DropdownMenu.RadioItem>
		<DropdownMenu.RadioItem name="theme" value="dark-high-contrast">
			<Icon svg={<MoonIcon weight="fill" />} />
			Dark High Contrast
		</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.

DropdownMenuContent

All props from Radix DropdownMenu.Content, plus:

PropTypeDefaultDescription
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.