How to create a dropdown menu with Shad/UI

Dropdown menos are a low popup menu that helps you show more options for your screen without clutter. They are extremely helpful in websites and apps.

In this guide, you will learn how to create a dropdown menu using Shadcn/UI. This is a device that works well with Tel Wind CSS and Redix UI to help you make good looks, easy to use.

The table of content

💡 Mandatory terms

Before we start, make sure you have:

• Reacting and basic knowledge of JavaScript

• Node.js and a package manager such as NPM, PNPM, or yarn installed

• Tel Wind CSS familiarity is a bonus, but it’s not required

We will go through everything step by step, so don’t worry if you are not yet an expert.

What is Shad/UI?

Shad/UI There is a group of tools (called ingredients) that help you create parts of a website, such as buttons, models and dropdowns. It is made with Radix UI and is styled using Tail Wind CSS. If you are using a react or next dot JS, it’s perfect.

With Shaden/UI, you just don’t get styling ingredients, you have full control over how everything works and is visible. This makes it perfect for the teams who want consistency in design without eliminating flexibility.

Why use Shadcn/UI for dropdown?

Dropdown Menos is a huge use case for Shaden/UI because:

• It’s easy to use with keyboard and screen readers

• You can create Custom Lox using Tel Wind CSS

• You control how it works and thinks

• It works great in real websites and apps

• It is well connected with the modern rect workfloose

Let’s make a drop -down step -by -step step

Step 1: Start a new project with SHARDCN/UI

You do not need to react, next dot J, or manually configure Tail Wind. Just run this command:

pnpm dlx shadcn@latest init

This is automatically a new next. The JS app will produce with Tail Wind CSS and Shadkin/UI already.

Indications: You can also use npx Instead of pnpm dlx If you prefer:

npx shadcn@latest init

After your project is ready, add the dropdown component using:

npx shadcn@latest add dropdown-menu

This drop -down menu will pull all the essential ingredients.

Step 3: Import your requirement

In your rect file, import a full drop -down 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: Create a Simple Drop Down

Here is a basic drop -down example:

export function ProfileMenu() {
  return (
    
      
        
          Open Menu
        
      
      
        My Account
        
        Profile
        Settings
        Log out
      
    
  )
}

This is just the beginning. You can add power users’ GRUS groups, subsidiaries, and keyboard shortcuts.

Step 5: Look it better

Use Tel Wind CSS to style your dropdown, and thus effects Hoover:

        
          
            Open Menu
          
        
        
          
            My Account
          
          
          
            Profile
          
          
            Settings
          
          Step 6: Make It Work on All Screens
Want your dropdown to be responsive? Use Tailwind’s responsive classes:

You can also position the dropdown dynamically using Radix's built -in portal support.
Step 7: Add cool icons
Install the loside icons:
npm install lucide-react
Then use them in your menu:
import { User, Settings, LogOut } from "lucide-react"


   Profile

The icons help users scan quickly - a great touch for UX.
Step 8: It's already accessible!
Shaden/UI (Thanks to Radix UI) makes your dropdown menu:
You don't have to create leaks - it just works 🙂
Real -world use matter: Country drop down with flags
Looking for more advanced dropdowns? Here is an amazing example that includes search, flag icons, and grouping:
👉 👉 Shaden Country Drops
This is open source and is an excellent place to see what is possible with Shaden/UI.
The final views
The use of Shadcn/UI to create a dropdown menu is fast, easy and powerful. You get styling, leakage and full control over how things look and work. Whether you are ready now or build for production, it's a solid tool to use.
Dropdown is just the beginning. Shadcn/UI offers a entire library of headless components to build modern UIS.
I hope you will be helpful this article! If you are building a sauce product or any web app that include user conversation or conversion, consider user's confidence to increase with better time notifications such as Model Popups, Sell popupEtc.