CODEWITHSUNDEEP
reactjsfrontendnext.jstailwind-cssweb-deployment-project
Urban_TechCoder
Urban_TechCoder

Reputation: 101

Dropdown Menu - Next.js & Tailwind CSS

I am working on a project and I need a sample code of dropdown menu using tailwind CSS and Next.js. If anyone could help me I would greatly appreciate it.

Upvotes: 8

Views: 48365

Answers (3)

Muhammad Umar
Muhammad Umar

Reputation: 229

'use client'
import React, { useState } from 'react'

const Dropdown = () => {
    const [isOpen, setIsOpen] = useState(false);

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

    const closeDropdown = () => {
        setIsOpen(false);
    };

    return (
        <div className='w-full py-6 pb-8'>
            <div className="relative inline-block">
                <button
                    type="button"
                    className="px-4 py-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm inline-flex items-center"
                    onClick={toggleDropdown}
                >
                    Dropdown <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
                    </svg>
                </button>

                {isOpen && (
                    <div className="origin-top-right absolute right-0 mt-2 w-44 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5">
                        <ul role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                            <li>
                                <a
                                    href="#"
                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                    onClick={closeDropdown}
                                >
                                    Option 1
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                    onClick={closeDropdown}
                                >
                                    Option 2
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                    onClick={closeDropdown}
                                >
                                    Option 3
                                </a>
                            </li>
                        </ul>
                    </div>
                )}
            </div>
        </div>
    )
}

export default Dropdown;

Upvotes: 3

Asad Ali
Asad Ali

Reputation: 13

Check out this code, you will like it....

  
              const [dropdownOpen, setdropdownOpen] = useState(false);
      
                 //////  jsx ///////
  
  
             <div
                            onClick={() => setdropdownOpen(!dropdownOpen)}
                            class="overflow-hidden rounded-full w-8 h-8 flex justify-center items-center
                            hover:cursor-pointer
                            ">

                          Toggle
                        </div>
                        
                        
                        <div
                            class={`${dropdownOpen ? `top-full opacity-100 visible` : 'top-[110%] invisible opacity-0'} absolute left-0 z-40 mt-2 w-full rounded border-[.5px] border-light bg-white py-5 shadow-card transition-all`}>
                            <a
                                href="javascript:void(0)"
                                class="block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary"
                            >
                                Dashboard
                            </a>
                            <a
                                href="javascript:void(0)"
                                class="block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary"
                            >
                                Settings
                            </a>
                            <a
                                href="javascript:void(0)"
                                class="block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary"
                            >
                                Earnings
                            </a>
                            <a
                                href="javascript:void(0)"
                                class="block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary"
                            >
                                Logout
                            </a>
                        </div>

Upvotes: 0

quick007
quick007

Reputation: 333

The developers of tailwindcss actually create fully unstyled UI components, check it out here: https://headlessui.dev/

Upvotes: 15

Related Questions