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>