Theme Switcher

Dropdown Menu

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

import {
	Button,
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuRadioItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@ngrok/mantle";

<DropdownMenu>
	<DropdownMenuTrigger asChild>
		<Button appearance="filled">Open Menu</Button>
	</DropdownMenuTrigger>
	<DropdownMenuContent>
		<DropdownMenuLabel>micah@ngrok.com</DropdownMenuLabel>
		<DropdownMenuSeparator />
		<DropdownMenuRadioItem name="theme" value="system">
			<Desktop className="size-5" />
			<span>System Preference</span>
		</DropdownMenuRadioItem>
		<DropdownMenuRadioItem name="theme" value="light">
			<Sun className="size-5" />
			<span>Light Mode</span>
		</DropdownMenuRadioItem>
		<DropdownMenuRadioItem name="theme" value="dark">
			<Moon className="size-5" />
			<span>Dark Mode</span>
		</DropdownMenuRadioItem>
		<DropdownMenuRadioItem name="theme" value="light-high-contrast">
			<Sun className="size-5" weight="fill" />
			<span>Light High Contrast</span>
		</DropdownMenuRadioItem>
		<DropdownMenuRadioItem name="theme" value="dark-high-contrast">
			<Moon className="size-5" weight="fill" />
			<span>Dark High Contrast</span>
		</DropdownMenuRadioItem>
		<DropdownMenuSeparator />
		<DropdownMenuItem>
			<Gear className="size-5" />
			<span>User Settings</span>
		</DropdownMenuItem>
		<DropdownMenuSeparator />
		<DropdownMenuItem>
			<SignOut className="size-5" />
			<span>Log out</span>
		</DropdownMenuItem>
	</DropdownMenuContent>
</DropdownMenu>