React Dropdown Component — Tailwind CSS + shadcn/ui

React dropdown components built with shadcn/ui and Tailwind CSS. Covers the five most common dropdown patterns — basic action menu, user account menu, nested submenus, command palette, and right-click context menu.

Key Classes Reference

Component	Purpose
`DropdownMenu`	Root wrapper — manages open/close state
`DropdownMenuTrigger`	Element that opens the menu on click
`DropdownMenuContent`	The floating menu panel
`DropdownMenuItem`	Individual clickable row
`DropdownMenuSub`	Nested submenu wrapper
`ContextMenuTrigger`	Wraps the right-click target area
`Command` + `CommandInput`	Searchable command palette

1. Basic Dropdown Menu

Standard dropdown with icons, separator and keyboard shortcut hints.

tsx

import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
  DropdownMenuShortcut,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { Settings, User, LogOut, HelpCircle, ChevronDown } from "lucide-react"

export default function BasicDropdown() {
  return (
    <div className="p-6 flex justify-center">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" className="gap-2">
            Options <ChevronDown className="h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-52">
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem className="gap-2 cursor-pointer">
            <User className="h-4 w-4" /> Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem className="gap-2 cursor-pointer">
            <Settings className="h-4 w-4" /> Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem className="gap-2 cursor-pointer">
            <HelpCircle className="h-4 w-4" /> Help
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem className="gap-2 cursor-pointer text-red-500 focus:text-red-500">
            <LogOut className="h-4 w-4" /> Sign Out
            <DropdownMenuShortcut>⌘Q</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

2. User Account Menu

User avatar trigger with account info header and action items.

tsx

import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Settings, User, CreditCard, Bell, LogOut } from "lucide-react"

export default function UserMenu() {
  return (
    <div className="p-6 flex justify-center">
      <DropdownMenu>
        <DropdownMenuTrigger className="focus:outline-none">
          <div className="flex items-center gap-2 cursor-pointer">
            <Avatar className="h-8 w-8">
              <AvatarImage src="https://github.com/shadcn.png" />
              <AvatarFallback className="bg-red-500 text-white text-xs">GS</AvatarFallback>
            </Avatar>
            <div className="text-left hidden sm:block">
              <p className="text-sm font-semibold leading-none">Gagan Singh</p>
              <p className="text-xs text-muted-foreground mt-0.5">gagan@lettstartdesign.com</p>
            </div>
          </div>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-60" align="end">
          <DropdownMenuLabel className="font-normal">
            <div className="flex items-center gap-3">
              <Avatar className="h-9 w-9">
                <AvatarFallback className="bg-red-500 text-white text-sm">GS</AvatarFallback>
              </Avatar>
              <div>
                <p className="font-semibold text-sm">Gagan Singh</p>
                <p className="text-xs text-muted-foreground">gagan@lettstartdesign.com</p>
                <Badge className="mt-1 h-4 text-xs bg-red-500 text-white">Pro</Badge>
              </div>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem className="gap-2 cursor-pointer"><User className="h-4 w-4" />Profile</DropdownMenuItem>
          <DropdownMenuItem className="gap-2 cursor-pointer"><CreditCard className="h-4 w-4" />Billing</DropdownMenuItem>
          <DropdownMenuItem className="gap-2 cursor-pointer"><Bell className="h-4 w-4" />Notifications</DropdownMenuItem>
          <DropdownMenuItem className="gap-2 cursor-pointer"><Settings className="h-4 w-4" />Settings</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem className="gap-2 cursor-pointer text-red-500 focus:text-red-500">
            <LogOut className="h-4 w-4" />Sign Out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

3. Multi-Level Dropdown

Nested submenu with DropdownMenuSub for grouped actions.

tsx

import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
  DropdownMenuSeparator, DropdownMenuTrigger,
  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { Share2, Download, FileText, Image, Code, Twitter, Linkedin, Link } from "lucide-react"

export default function MultiLevelDropdown() {
  return (
    <div className="p-6 flex justify-center">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button className="bg-red-500 hover:bg-red-600 text-white">Actions</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-52">
          <DropdownMenuLabel>Template Actions</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuSub>
            <DropdownMenuSubTrigger className="gap-2">
              <Download className="h-4 w-4" /> Download as
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem className="gap-2 cursor-pointer"><FileText className="h-4 w-4" />PDF</DropdownMenuItem>
              <DropdownMenuItem className="gap-2 cursor-pointer"><Image className="h-4 w-4" />PNG</DropdownMenuItem>
              <DropdownMenuItem className="gap-2 cursor-pointer"><Code className="h-4 w-4" />HTML</DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger className="gap-2">
              <Share2 className="h-4 w-4" /> Share
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem className="gap-2 cursor-pointer"><Twitter className="h-4 w-4" />Twitter</DropdownMenuItem>
              <DropdownMenuItem className="gap-2 cursor-pointer"><Linkedin className="h-4 w-4" />LinkedIn</DropdownMenuItem>
              <DropdownMenuItem className="gap-2 cursor-pointer"><Link className="h-4 w-4" />Copy Link</DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuSeparator />
          <DropdownMenuItem className="gap-2 cursor-pointer text-red-500 focus:text-red-500">
            Delete Template
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

4. Command Palette Dropdown

Searchable command palette triggered by a button using shadcn/ui Command.

tsx

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Command, CommandEmpty, CommandGroup, CommandInput,
  CommandItem, CommandList, CommandSeparator,
} from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Search, LayoutDashboard, Users, Settings, FileText, BarChart } from "lucide-react"

const commands = {
  Pages: [
    { icon: LayoutDashboard, label: "Dashboard",  href: "/" },
    { icon: Users,           label: "Team",       href: "/team" },
    { icon: BarChart,        label: "Analytics",  href: "/analytics" },
  ],
  Settings: [
    { icon: Settings,  label: "Preferences", href: "/settings" },
    { icon: FileText,  label: "API Keys",    href: "/api-keys" },
  ],
}

export default function CommandDropdown() {
  const [open, setOpen] = useState(false)
  return (
    <div className="p-6 flex justify-center">
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button variant="outline" className="gap-2 w-48 justify-start text-muted-foreground">
            <Search className="h-4 w-4" />Search...
            <kbd className="ml-auto text-xs bg-gray-100 px-1.5 py-0.5 rounded">⌘K</kbd>
          </Button>
        </PopoverTrigger>
        <PopoverContent className="p-0 w-64" align="start">
          <Command>
            <CommandInput placeholder="Type a command..." />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              {Object.entries(commands).map(([group, items]) => (
                <CommandGroup key={group} heading={group}>
                  {items.map((item) => (
                    <CommandItem
                      key={item.label}
                      onSelect={() => { window.location.href = item.href; setOpen(false) }}
                      className="gap-2 cursor-pointer"
                    >
                      <item.icon className="h-4 w-4 text-muted-foreground" />
                      {item.label}
                    </CommandItem>
                  ))}
                </CommandGroup>
              ))}
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  )
}

5. Right-Click Context Menu

Context menu triggered on right-click using shadcn/ui ContextMenu.

tsx

import {
  ContextMenu, ContextMenuContent, ContextMenuItem,
  ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger,
  ContextMenuShortcut,
} from "@/components/ui/context-menu"
import { Copy, Pencil, Trash2, Star, ExternalLink } from "lucide-react"

export default function RightClickContextMenu() {
  return (
    <div className="p-6">
      <ContextMenu>
        <ContextMenuTrigger>
          <div className="flex items-center gap-4 p-4 border-2 border-dashed border-gray-200 rounded-xl hover:border-red-300 transition-colors cursor-context-menu select-none">
            <div className="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
              <span className="text-xl">🅰</span>
            </div>
            <div>
              <p className="font-semibold text-sm">Marvel Angular Dashboard</p>
              <p className="text-xs text-muted-foreground">Angular 22 + Bootstrap 5 · $49</p>
            </div>
            <p className="ml-auto text-xs text-muted-foreground">Right-click me</p>
          </div>
        </ContextMenuTrigger>
        <ContextMenuContent className="w-52">
          <ContextMenuLabel>Template Actions</ContextMenuLabel>
          <ContextMenuSeparator />
          <ContextMenuItem className="gap-2 cursor-pointer">
            <ExternalLink className="h-4 w-4" /> Open Preview
          </ContextMenuItem>
          <ContextMenuItem className="gap-2 cursor-pointer">
            <Star className="h-4 w-4" /> Add to Favourites
            <ContextMenuShortcut>⌘F</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem className="gap-2 cursor-pointer">
            <Copy className="h-4 w-4" /> Copy Link
            <ContextMenuShortcut>⌘C</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem className="gap-2 cursor-pointer">
            <Pencil className="h-4 w-4" /> Rename
            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuItem className="gap-2 cursor-pointer text-red-500 focus:text-red-500">
            <Trash2 className="h-4 w-4" /> Delete
            <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  )
}

Frequently Asked Questions

How do I build a dropdown menu in React with shadcn/ui?▲

Import DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, and DropdownMenuItem from shadcn/ui. Wrap your trigger button in DropdownMenuTrigger and your menu items in DropdownMenuContent. shadcn/ui handles positioning, keyboard navigation and close-on-click automatically.

How do I add a submenu to a React dropdown?▼

Use DropdownMenuSub, DropdownMenuSubTrigger, and DropdownMenuSubContent from shadcn/ui. Nest a DropdownMenuSub block inside your DropdownMenuContent. The submenu opens on hover automatically.

Need a Full React + Next.js Dashboard Template?

Get a complete React + Next.js dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

React Dropdown Component — Tailwind CSS + shadcn/ui

Key Classes Reference

1. Basic Dropdown Menu

2. User Account Menu

3. Multi-Level Dropdown

4. Command Palette Dropdown

5. Right-Click Context Menu

Frequently Asked Questions

Need a Full React + Next.js Dashboard Template?

Related Components

React Navbar Component

React Sidebar Navigation

Bootstrap 5 Dropdown Example