Create Dropdowns UI with Next.JS and Tailwind CSS

Last Updated : 26 Sep, 2024

Dropdowns are an essential component of web applications used for navigation, filtering data or selecting items from a list. In this article, we’ll explore how to create a clean and responsive dropdown UI using Next.js and Tailwind CSS. Tailwind's utility-first CSS framework allows us to easily style components without writing custom CSS.

Prerequisites

Approach To Create Dropdowns UI

Start by creating a new Next.js project using create-next-app.
Create a dropdown component (Dropdown.js) in the components folder.
We will create an array of dropdown options that we want to add.
We will create a button that will toggle the dropdown and display the currently selected option.
Use the React useState hook to manage the dropdown's open/close state.
Add logic to handle user clicks. When a user selects an option update the button text and close the dropdown.
We will use Tailwind’s utility classes to style the dropdown button and the menu options.

Steps To Create Dropdowns UI

Step 1: Create the NextJs App using the following command.

npx create-next-app@latest dropdown

Configuration which you should follow while creating the App :

file — Select the required options while creating Application

Step 2: Move to the project folder from Terminal

cd dropdown

Step 3: Install dependency

npm i react-icons

Project Structure

Dependencies

"dependencies": {
    "next": "14.2.13",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.3.0"
  },
"devDependencies": {
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }

Step 4: Write the following code in the required files

(The name of the files is mentioned in the first line of each code block)

CSS

/*global.css*/

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --background: #ffffff;
    --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
    }
}

body {
    color: var(--foreground);
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

JavaScript

// page.js

import Dropdown from "./components/Dropdown";

export default function Home() {
    return (
        <div>
            <h3 className="text-center
                           text-3xl font-bold
                           mt-12">
                            Select Course
                            </h3>
            <Dropdown />
        </div>
    );
}

JavaScript

// Dropdown.js 

'use client'
import { useState } from 'react';
import { FaCaretDown } from 'react-icons/fa';

export default function Dropdown() {
    const [isOpen, setIsOpen] = useState(false);
    const [selectedLanguage, setSelectedLanguage] = useState('Select Course');

    const languages = ['DSA Self Placed', 'JavaScript',
                       'Python', 'Java', 'C++', 'Ruby',
                       'Go', 'TypeScript'];

    const toggleDropdown = () => {
        setIsOpen(!isOpen);
    };

    const handleSelect = (language) => {
        setSelectedLanguage(language);
        setIsOpen(false);
    };

    return (
        <div className="flex justify-center min-h-screen">
            <div className="relative inline-block text-left">
                {/* Dropdown button */}
                <button
                    type="button"
                    className="inline-flex justify-center w-full
                               rounded-md border border-gray-300
                               shadow-sm px-4 py-2 bg-white text-sm
                               font-medium text-black hover:bg-gray-50"
                    onClick={toggleDropdown}
                >
                    {selectedLanguage}
                    <FaCaretDown className="ml-2" />
                </button>

                {/* Dropdown menu */}
                {isOpen && (
                    <div className="origin-top-right absolute
                                    right-0 mt-2 w-56 rounded-md
                                    shadow-lg bg-white ring-1 ring-black
                                    ring-opacity-5 focus:outline-none">
                        <div className="py-1">
                            {languages.map((language, index) => (
                                <a
                                    key={index}
                                    href="#"
                                    className="block px-4 py-2
                                               text-sm text-black
                                               hover:bg-gray-100"
                                    onClick={() => handleSelect(language)}
                                >
                                    {language}
                                </a>
                            ))}
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}

Run your app by executing below command.

npm run dev

Output

Create Dropdowns UI with Next.JS and Tailwind CSS

Create Form Layouts UI using Next.JS and Tailwind CSS

yuvrajghule281

Improve

Article Tags :