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>corby.pickles@ngork.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: