Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Installation
CLI
bash
npx fivui add dropdown-menu
Manual
Install the required dependencies:
bash
npm install @radix-ui/react-dropdown-menu
The component uses Button component.
Usage
tsx
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
tsx
<DropdownMenu> <DropdownMenuTrigger>Open</DropdownMenuTrigger> <DropdownMenuContent> <DropdownMenuLabel>My Account</DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuItem>Profile</DropdownMenuItem> <DropdownMenuItem>Billing</DropdownMenuItem> <DropdownMenuItem>Team</DropdownMenuItem> <DropdownMenuItem>Subscription</DropdownMenuItem> </DropdownMenuContent></DropdownMenu>
Examples
Checkboxes
tsx
"use client"
import * as React from "react"import { Button } from "@/components/ui/button"import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
export function DropdownMenuCheckboxes() { const [showStatusBar, setShowStatusBar] = React.useState(true) const [showActivityBar, setShowActivityBar] = React.useState(false) const [showPanel, setShowPanel] = React.useState(false)
return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline">Open</Button> </DropdownMenuTrigger> <DropdownMenuContent className="w-56"> <DropdownMenuLabel>Appearance</DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar} > Status Bar </DropdownMenuCheckboxItem> <DropdownMenuCheckboxItem checked={showActivityBar} onCheckedChange={setShowActivityBar} disabled > Activity Bar </DropdownMenuCheckboxItem> <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel} > Panel </DropdownMenuCheckboxItem> </DropdownMenuContent> </DropdownMenu> )}
Radio Group
tsx
"use client"
import * as React from "react"import { Button } from "@/components/ui/button"import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
export function DropdownMenuRadioGroupDemo() { const [position, setPosition] = React.useState("bottom")
return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline">Open</Button> </DropdownMenuTrigger> <DropdownMenuContent className="w-56"> <DropdownMenuLabel>Panel Position</DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuRadioGroup value={position} onValueChange={setPosition}> <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem> <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem> <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem> </DropdownMenuRadioGroup> </DropdownMenuContent> </DropdownMenu> )}
API Reference
DropdownMenuItem
Prop | Type | Default | Description |
---|---|---|---|
inset | boolean | false | Whether the item should be inset |
disabled | boolean | false | Whether the item is disabled |
DropdownMenuCheckboxItem
Prop | Type | Default | Description |
---|---|---|---|
checked | boolean | false | Whether the checkbox is checked |
onCheckedChange | function | - | Callback when checked state changes |
DropdownMenuRadioItem
Prop | Type | Default | Description |
---|---|---|---|
value | string | - | The value of the radio item |