Components
Dropdown Menu
An anchored menu of actions, with checkbox items, radio items and submenus.
Loading...
Installation
npx shadcn@latest add @fujin/dropdown-menuUsage
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline">Open</Button>} />
<DropdownMenuContent>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Column visibility
<DropdownMenuCheckboxItem
checked={column.getIsVisible()}
onCheckedChange={column.toggleVisibility}
>
{column.label}
</DropdownMenuCheckboxItem>Pitfalls
- An icon-only trigger needs its own
aria-label- the menu's accessible name does not cover it. DropdownMenuCheckboxItemandDropdownMenuRadioItemalready setcloseOnClick={false}so picking one doesn't close a multi-pick menu - override it if you actually want it to close.
API Reference
Prop
Type
Every other prop is forwarded to the Base UI Menu.