Dropdown Menu
Group contextual actions in a keyboard-accessible menu.
Preview
Import
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuGroup, DropdownMenuSub, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuSubContent } from "@sigil-ui/components";Usage
<DropdownMenu>
<DropdownMenuTrigger asChild><Button variant="outline">Options</Button></DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Duplicate</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Sub-components
This component includes the following parts:
<DropdownMenuTrigger><DropdownMenuGroup><DropdownMenuSub><DropdownMenuContent><DropdownMenuItem><DropdownMenuCheckboxItem><DropdownMenuRadioItem><DropdownMenuLabel><DropdownMenuSeparator><DropdownMenuSubTrigger><DropdownMenuSubContent>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-card-radius | Card radius |
--s-border | Border |
--s-border-style | Border style |
--s-surface | Surface |
--s-text | Text |
--s-shadow-md | Shadow md |
--s-radius-sm | Radius sm |
--s-duration-fast | Duration fast |
--s-background | Background |
--s-text-muted | Text muted |