Dropdown Menu

FREE

Menu with items, icons, shortcuts, checkbox and radio items, labels, separators and submenus.

Playground

Change the props and watch the component and its code update live.

Props

Submenu

Code

import { Ellipsis, Rocket, Eye, Trash2, Share2, FileDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="secondary" endIcon={<Ellipsis />}>Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem><Rocket /> Production</DropdownMenuItem>
    <DropdownMenuItem><Eye /> Preview</DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger><Share2 /> Export</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem><FileDown /> Docker image</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive"><Trash2 /> Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Installation

Terminal

npx @bloxa/cli add dropdown-menu
# or: npx shadcn@latest add @bloxa/dropdown-menu

Packages installed automatically: radix-ui

Examples

Icons and shortcuts

Checkable items

Submenu

API reference

Every component also accepts the props of the element it renders.

DropdownMenuItem

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	Red style for destructive actions.

DropdownMenuContent

Prop	Type	Default	Description
align	"start" \| "center" \| "end"	"center"	Alignment relative to the trigger.
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Side the menu opens on.
sideOffset	number	6	Gap from the trigger in px.