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,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@ngrok/mantle/dropdown-menu";
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button appearance="filled" type="button">Open Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>micah@ngrok.com</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioItem name="theme" value="system">
<Desktop />
System Preference
</DropdownMenuRadioItem>
<DropdownMenuRadioItem name="theme" value="light">
<Sun />
Light Mode
</DropdownMenuRadioItem>
<DropdownMenuRadioItem name="theme" value="dark">
<Moon />
Dark Mode
</DropdownMenuRadioItem>
<DropdownMenuRadioItem name="theme" value="light-high-contrast">
<Sun weight="fill" />
Light High Contrast
</DropdownMenuRadioItem>
<DropdownMenuRadioItem name="theme" value="dark-high-contrast">
<Moon weight="fill" />
Dark High Contrast
</DropdownMenuRadioItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Gear />
User Settings
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<SignOut />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>API Reference
The DropdownMenu components are built on top of Radix Dropdown Menu.
DropdownMenuContent
All props from Radix DropdownMenu.Content, plus: