How to create the reused drop-down menu?

Here's a basic example of how to create a dropdown menu using Next.js and Tailwind CSS:

1. First, install Tailwind CSS and its dependencies by running the following command in your terminal:

npm install tailwindcss postcss-preset-env postcss-flexbugs-fixes autoprefixer

1. Next, create a tailwind.config.js file in your project's root directory and add the following code to it:

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
  theme: {},
  variants: {},
  plugins: [],
}

This sets up Tailwind CSS to work with Next.js, enables the jit mode for faster builds, and specifies which files to purge when generating the final CSS file.

1. Now create a new component for the dropdown menu. For example, you can create a DropdownMenu component in a file named DropdownMenu.js. Here's a basic example:

import { useState } from 'react'
import Link from 'next/link'

const DropdownMenu = ({ items }) => {
  const [isOpen, setIsOpen] = useState(false)

  const toggleMenu = () => {
    setIsOpen(!isOpen)
  }

  return (
    <div className="relative">
      <button
        type="button"
        onClick={toggleMenu}
        className="inline-flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        aria-haspopup="true"
        aria-expanded={isOpen}
      >
        Menu
        <svg
          className="-mr-1 ml-2 h-5 w-5"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fillRule="evenodd"
            d="M10 14l-5-5h10l-5 5z"
          />
        </svg>
      </button>

      <div
        className={`${
          isOpen ? 'block' : 'hidden'
        } absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="options-menu"
      >
        {items.map((item) => (
          <Link href={item.href} key={item.label}>
            <a
              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
              role="menuitem"
              tabIndex="-1"
              onClick={() => setIsOpen(false)}
            >
              {item.label}
            </a>
          </Link>
        ))}
      </div>
    </div>
  )
}

export default DropdownMenu

In this example, the DropdownMenu component takes an array of items as a prop, which contains objects with href and label properties for each menu item. When the user clicks on the menu button, the isOpen state is toggled to show or hide the menu items.

The menu button and items are styled using Tailwind CSS classes.

1. Finally, you can use the DropdownMenu component in your Next.js pages by importing it and passing in the necessary props. For example:

import DropdownMenu from '../components/DropdownMenu'

const items = [
  { label: 'Home', href: '/' },
  { label: 'About', href: '/about' },
  { label: 'Contact', href: '/contact' },
]

const IndexPage = () => {
  return (
    <div className="container mx-auto">
      <DropdownMenu items={items} />
      <h1 className="text-2xl font-bold text-center mt-8">Hello, world!</h1>
    </div>
  )
}

export default IndexPage

This example imports the DropdownMenu component and passes in an array of items to display in the menu. The menu is then rendered above the page title.

That's it! With these steps, you should now have a basic dropdown menu working in your Next.js app using Tailwind CSS for styling. Of course, you can customize the styles and behavior to fit your specific needs.

Related Post: Embrace constraints to more creativity and concentration
Author: An Phan