Create Select Menus UI Using Next.JS and Tailwind CSS

Last Updated : 03 Oct, 2024

Creating a Select Menu UI using Next.js and Tailwind CSS involves several steps. Below is a detailed approach to guide you through the process without providing specific code.

Prerequisites:

Approach to Create Select Menus UI

Begin by initializing your Next.js application, which will create a new project folder with all the necessary configurations. After setting up your project, you will navigate to the project directory to install Tailwind CSS.
Create a new component dedicated to the Select Menu. This component will include the necessary HTML structure for a dropdown menu, utilizing the <select> element and its associated <option> elements for the selectable items.
To make the Select Menu interactive, you will need to manage its state using React's state management features.
After developing the Select Menu component, you will integrate it into one of your Next.js pages, allowing users to see and interact with the menu. Finally, run your Next.js application to test the Select Menu's functionality.

Steps to Create Select Menus UI

Step 1: Set Up the Next.js Project

npx create-next-app@latest my-select-menu
cd my-select-menu

install-next-js-1 — creating Nextjs project

Step 2: Install Tailwind CSS by following these commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Configure Tailwind CSS

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 4: Configure Globals.CSS

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

Step 5: Next, import the global styles in pages/_app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp

Folder Structure

Updated Dependencies:

 "dependencies": {
    "next": "14.2.14",
    "react": "^18",
    "react-dom": "^18"
  },

Example: In this example we will create the select menu component using the next.js and tailwind css

Now, let's create the Select Menu component using Tailwind CSS. If you don't have components folder, create a components folder inside that folder create SelectMenu.js file.

JavaScript

// components/SelectMenu.js

import { useState } from 'react';

const SelectMenu = ({ options, label }) => {
    const [selected, setSelected] = useState(options[0]);

    return (
        <div className="w-full max-w-xs mx-auto">
            <label className="block text-sm font-medium
            text-gray-700 mb-1">{label}</label>
            <div className="relative">
                <select
                    value={selected}
                    onChange={(e) => setSelected(e.target.value)}
                    className="block w-full pl-3 pr-8 py-2 
                    text-base border-gray-300 bg-white text-gray-900 
                    focus:outline-none focus:ring-2 focus:ring-green-500
                    focus:border-green-500 sm:text-sm rounded-md shadow-sm 
                    appearance-none"
                >
                    {options.map((option, index) => (
                        <option key={index} value={option}>
                            {option}
                        </option>
                    ))}
                </select>
                <div className="absolute inset-y-0 right-0 flex items-center 
                pr-2 pointer-events-none">
                    <svg
                        className="h-5 w-5 text-gray-500"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                        aria-hidden="true"
                    >
                        <path d="M7 10l5 5 5-5H7z" />
                    </svg>
                </div>
            </div>
        </div>
    );
};

export default SelectMenu;

JavaScript

// pages/index.js

import SelectMenu from '../components/SelectMenu';

export default function Home() {
    const options = [
        'Leonardo DiCaprio',
        'Scarlett Johansson',
        'Tom Hanks',
        'Angelina Jolie',
        'Robert Downey Jr.',
        'Denzel Washington',
        'Meryl Streep',
        'Brad Pitt',
        'Jennifer Lawrence',
        'Johnny Depp',
        'Natalie Portman',
        'Will Smith',
        'Christian Bale',
        'Emma Watson',
        'Morgan Freeman'
    ];


    return (
        <div className="min-h-screen flex items-center justify-center
        bg-gray-50">
            <div className="text-center">
                <h1 className="text-4xl font-bold text-[#008000]
                mb-4">GFG Select Menu</h1>
                <SelectMenu options={options} label="Choose an option:" />
            </div>
        </div>
    );
}

To run the Application use the command

npm run dev

Output

How To Add Custom Box Shadow In Tailwind CSS?

25anuja

Improve

Article Tags :