Dropdown menus are little pop-up menus that help you show more options without cluttering your screen. They’re super helpful in websites and apps.
In this guide, you’ll learn how to build a dropdown menu using shadcn/ui. It’s a tool that works well with Tailwind CSS and Radix UI to help you make nice-looking, easy-to-use menus.
Table of Contents
💡 Prerequisites
Before we start, make sure you have:
Basic knowledge of React and JavaScript
Node.js and a package manager like npm, pnpm, or yarn are installed
Familiarity with Tailwind CSS is a bonus, but not required
We’ll walk through everything step by step, so don’t worry if you’re not an expert yet.
What is shadcn/ui?
shadcn/ui is a group of tools (called components) that help you build parts of a website, like buttons, modals, and dropdowns. It’s built with Radix UI and styled using Tailwind CSS. It’s perfect if you’re using React or Next.js.
With shadcn/ui, you don’t get just styled components, you get full control over how everything works and looks. That makes it perfect for teams that want consistency in design without giving up flexibility.
Why Use shadcn/ui for Dropdowns?
Dropdown menus are a great use case for shadcn/ui because:
It’s easy to use with keyboard and screen readers
You can create custom looks using Tailwind CSS
You control how it works and looks
It works great in real websites and apps
It integrates well with modern React workflows
Let’s Build a Dropdown Step-by-Step
Step 1: Start a New Project with shadcn/ui
You don’t need to set up React, Next.js, or Tailwind manually. Just run this command:
pnpm dlx shadcn@latest init
This will automatically create a new Next.js app with Tailwind CSS and shadcn/ui preconfigured.
Tip: You can also use npx instead of pnpm dlx if you prefer:
npx shadcn@latest init
Step 2: Add the Dropdown Menu Component
After your project is ready, add the dropdown component using:
npx shadcn@latest add dropdown-menu
This will pull in all the necessary components to create a dropdown menu.
Step 3: Import What You Need
In your React file, import the full dropdown module so you can access all its features:
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuPortal,
} from "@/components/ui/dropdown-menu"
Step 4: Build a Simple Dropdown
Here’s a basic dropdown example:
export function ProfileMenu() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="px-4 py-2 bg-primary text-white rounded">
Open Menu
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
This is just the start. You can add groups, submenus, and keyboard shortcuts for power users.
Step 5: Make It Look Better
Use Tailwind CSS to style your dropdown, and hover effects like this:
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="px-3 py-1.5 bg-primary text-white text-sm font-medium rounded-md hover:bg-primary/90 transition-colors">
Open Menu
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-52 border-gray-200 shadow-lg rounded-md space-y-0.5">
<DropdownMenuLabel className="text-xs text-gray-500">
My Account
</DropdownMenuLabel>
<DropdownMenuSeparator className="border-t border-gray-100" />
<DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
Profile
</DropdownMenuItem>
<DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
Settings
</DropdownMenuItem>
<DropdownMenuItem className="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-md cur
Step 6: Make It Work on All Screens
Want your dropdown to be responsive? Use Tailwind’s responsive classes:
<DropdownMenuContent className="w-full md:w-64">
You can also dynamically position the dropdown using Radix’s built-in portal support.
Step 7: Add Cool Icons
Install Lucide icons:
npm install lucide-react
Then use them in your menu:
import { User, Settings, LogOut } from "lucide-react"
<DropdownMenuItem>
<User className="mr-2 h-4 w-4" /> Profile
</DropdownMenuItem>
Icons help users scan options quickly – a great touch for UX.
Step 8: It’s Already Accessible!
shadcn/ui (thanks to Radix UI) makes your dropdown menu:
Keyboard friendly
Screen-reader ready
Following best web practices
You don’t need to configure accessibility – it just works 🙂
Real-World Use Case: Country Dropdown with Flags
Looking for a more advanced dropdown? Here’s an amazing example that includes search, flag icons, and grouping:
👉 shadcn-country-dropdown.vercel.app
It’s open-source and a great place to see what’s possible with shadcn/ui.
Final Thoughts
Using shadcn/ui to create a dropdown menu is fast, simple, and powerful. You get great styling, accessibility, and full control over how things look and work. Whether you’re just starting out or building for production, this is a solid tool to use.
Dropdowns are just the beginning. shadcn/ui offers a whole library of headless components for building modern UIs.
I hope you found this article helpful! If you’re building a SaaS product or any web app that involves user interaction or conversion, consider enhancing user trust with real-time notifications like modal pop-ups, sales pop up, etc.
Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & MoreÂ