Dropdown Menu
A menu of actions behind a button.
Usage
import { Button } from "@zynactra/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@zynactra/ui/dropdown-menu"<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline" />}>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>Examples
Row actions
Actions for one row of a table, behind an icon button. Its aria-label names the row ("Actions for payments-api").
| Service | Region | Status | Actions |
|---|---|---|---|
| payments-api | eu-west | Live | |
| billing-worker | us-east | Live | |
| reports-cron | ap-south | Stopped |
View options
Checkbox items toggle columns and a radio group picks the sort, both controlled. Checkbox and radio items keep the menu open, so several can change at once.
| Deploy | Service | Author |
|---|---|---|
| d-482 | payments-api | Nimal |
| d-481 | billing-worker | Ayesha |
| d-480 | reports-cron | Kasun |
Destructive item
A destructive item opens a confirm instead of acting. The Alert Dialog sits outside the menu with its own open state.
Guidelines
- Shortcuts are mono, right-aligned.
- Destructive items go last, after a separator.
- An item that opens a dialog ends with an ellipsis ("Delete workspace…").
API reference
Behaviour and props come from Base UI. See the Base UI Dropdown Menu docs.