Loading...
Loading...
> Displays a menu to the user—such as a set of actions or functions—triggered by a button.
1import {2 DropdownMenu,3 DropdownMenuTrigger,4 DropdownMenuContent,5 DropdownMenuItem,6 DropdownMenuLabel,7 DropdownMenuSeparator,8} from "@/components/ui/dropdown-menu"
1import {2 DropdownMenu,3 DropdownMenuTrigger,4 DropdownMenuContent,5 DropdownMenuItem,6 DropdownMenuLabel,7 DropdownMenuSeparator,8} from "@/components/ui/dropdown-menu";9import { Button } from "@/components/ui/button";1011<DropdownMenu>12 <DropdownMenuTrigger asChild>13 <Button variant="outline">> OPEN MENU</Button>14 </DropdownMenuTrigger>15 <DropdownMenuContent align="end" className="w-56">16 <DropdownMenuLabel>My Account</DropdownMenuLabel>17 <DropdownMenuSeparator />18 <DropdownMenuItem className="font-semibold">19 <User className="mr-2 h-4 w-4" />20 Profile21 </DropdownMenuItem>22 <DropdownMenuItem className="font-semibold">23 <Settings className="mr-2 h-4 w-4" />24 Settings25 </DropdownMenuItem>26 <DropdownMenuSeparator />27 <DropdownMenuItem className="text-destructive font-semibold">28 <LogOut className="mr-2 h-4 w-4" />29 Log out30 </DropdownMenuItem>31 </DropdownMenuContent>32</DropdownMenu>
1const [showStatusBar, setShowStatusBar] = useState(true);2const [showActivityBar, setShowActivityBar] = useState(false);34<DropdownMenu>5 <DropdownMenuTrigger asChild>6 <Button variant="outline">> VIEW OPTIONS</Button>7 </DropdownMenuTrigger>8 <DropdownMenuContent className="w-56">9 <DropdownMenuLabel>Appearance</DropdownMenuLabel>10 <DropdownMenuSeparator />11 <DropdownMenuCheckboxItem12 checked={showStatusBar}13 onCheckedChange={setShowStatusBar}14 >15 Status Bar16 </DropdownMenuCheckboxItem>17 <DropdownMenuCheckboxItem18 checked={showActivityBar}19 onCheckedChange={setShowActivityBar}20 >21 Activity Bar22 </DropdownMenuCheckboxItem>23 </DropdownMenuContent>24</DropdownMenu>
1const [position, setPosition] = useState("bottom");23<DropdownMenu>4 <DropdownMenuTrigger asChild>5 <Button variant="outline">> POSITION: {position}</Button>6 </DropdownMenuTrigger>7 <DropdownMenuContent className="w-56">8 <DropdownMenuLabel>Panel Position</DropdownMenuLabel>9 <DropdownMenuSeparator />10 <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>11 <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>12 <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>13 <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>14 </DropdownMenuRadioGroup>15 </DropdownMenuContent>16</DropdownMenu>
1<DropdownMenu>2 <DropdownMenuTrigger asChild>3 <Button variant="outline">> ACTIONS</Button>4 </DropdownMenuTrigger>5 <DropdownMenuContent className="w-56">6 <DropdownMenuItem className="font-semibold">7 <Mail className="mr-2 h-4 w-4" />8 Email9 </DropdownMenuItem>10 <DropdownMenuItem className="font-semibold">11 <MessageSquare className="mr-2 h-4 w-4" />12 Message13 </DropdownMenuItem>14 <DropdownMenuSeparator />15 <DropdownMenuSub>16 <DropdownMenuSubTrigger className="font-semibold">17 <UserPlus className="mr-2 h-4 w-4" />18 Invite users19 </DropdownMenuSubTrigger>20 <DropdownMenuSubContent>21 <DropdownMenuItem className="font-semibold">22 <Mail className="mr-2 h-4 w-4" />23 Email24 </DropdownMenuItem>25 <DropdownMenuItem className="font-semibold">26 <MessageSquare className="mr-2 h-4 w-4" />27 Message28 </DropdownMenuItem>29 <DropdownMenuSeparator />30 <DropdownMenuItem className="font-semibold">31 <PlusCircle className="mr-2 h-4 w-4" />32 More...33 </DropdownMenuItem>34 </DropdownMenuSubContent>35 </DropdownMenuSub>36 </DropdownMenuContent>37</DropdownMenu>
1<DropdownMenu>2 <DropdownMenuTrigger asChild>3 <Button variant="outline">> KEYBOARD SHORTCUTS</Button>4 </DropdownMenuTrigger>5 <DropdownMenuContent className="w-56">6 <DropdownMenuLabel>Commands</DropdownMenuLabel>7 <DropdownMenuSeparator />8 <DropdownMenuItem className="font-semibold">9 <User className="mr-2 h-4 w-4" />10 Profile11 <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>12 </DropdownMenuItem>13 <DropdownMenuItem className="font-semibold">14 <Settings className="mr-2 h-4 w-4" />15 Settings16 <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>17 </DropdownMenuItem>18 <DropdownMenuItem className="font-semibold">19 <Keyboard className="mr-2 h-4 w-4" />20 Keyboard shortcuts21 <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>22 </DropdownMenuItem>23 </DropdownMenuContent>24</DropdownMenu>
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "center" | "end" | "center" | Horizontal alignment of the dropdown menu relative to the trigger. Use 'end' for right-aligned (table actions, navbar), 'start' for left-aligned (sidebar menus). |
| sideOffset | number | 4 | Distance in pixels between the trigger and the dropdown content |
| inset | boolean | false | Adds left padding for alignment with items that have indicators (checkboxes, radio buttons) |
| checked | boolean | - | For DropdownMenuCheckboxItem - the controlled checked state |
| onCheckedChange | (checked: boolean) => void | - | For DropdownMenuCheckboxItem - callback when checked state changes |
| value | string | - | For DropdownMenuRadioGroup - the value of the selected item |
| onValueChange | (value: string) => void | - | For DropdownMenuRadioGroup - callback when the selected value changes |
✓ Use Dropdown Menu when:
✗ Don't use when:
Best Practices: