Create Flyout Menus using Next.js and Tailwind CSS

Last Updated : 04 Oct, 2024

We'll use Next.js as the framework to set up the project and Tailwind CSS for rapid styling. Tailwind makes it easy to style components without writing custom CSS for each element, keeping the development process smooth and efficient.

Prerequisites

Approach For Creating Flyout Menus

Set up a new Next.js project.
Install and configure Tailwind CSS.
Build a responsive Feeds UI with custom colors (primary: green, secondary: navy blue).
Write all necessary components and styles.

Steps to Create Flyout Menus

Step 1: Set up the Next.js project

npx create-next-app feeds-ui-nextjs
cd feeds-ui-nextjs

Step 2: Install Tailwind CSS

Install Tailwind CSS and its dependencies:

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

Step 3: Update globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
/* globals.css */

/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Base Styles */
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    /* White background for the whole app */
    color: #333;
    /* Dark text color */
}

*,
*::before,
*::after {
    box-sizing: inherit;
    /* Set box-sizing to border-box */
}

/* Utility Classes */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.h-screen {
    height: 100vh;
}

.bg-green-600 {
    background-color: #4caf50;
    /* Primary Green Color */
}

.bg-gray-100 {
    background-color: #f7fafc;
    /* Light Gray Background */
}

.bg-white {
    background-color: #ffffff;
    /* White Background */
}

.text-green-600 {
    color: #4caf50;
    /* Green Text Color */
}

.text-white {
    color: #ffffff;
    /* White Text Color */
}

.rounded-lg {
    border-radius: 0.5rem;
    /* Rounded corners */
}

.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

/* Custom Hover Effects */
.hover\:bg-gray-200:hover {
    background-color: #edf2f7;
    /* Light Gray on hover */
}

/* Button Styles */
button {
    cursor: pointer;
    /* Pointer cursor for buttons */
}

Project Structure

Updated Dependencies:

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

Example: In this example we will create the flyout menus using next.js and tailwind css

JavaScript

// components/FlyoutMenu.js

"use client"; // Ensure this component is a client component

import { useState } from "react";

const FlyoutMenu = () => {
    const [open, setOpen] = useState(false);
    const [subMenuOpen, setSubMenuOpen] = useState(null);

    const handleToggle = () => setOpen(!open);

    const handleSubMenuToggle = (index) => {
        setSubMenuOpen(subMenuOpen === index ? null : index);
    };

    return (
        <div className="flex flex-col items-center justify-center
        h-screen bg-white">
            {/* Header Section */}
            <div className="bg-green-600 w-full py-4 text-center">
                <h1 className="text-white text-3xl font-bold">Geeks
                for Geeks</h1>
            </div>

            {/* Menu Section */}
            <nav className="bg-white shadow-md rounded-lg p-4 mt-4 relative">
                <button
                    className="text-green-600 font-bold py-2 px-4 rounded 
                    focus:outline-none"
                    onClick={handleToggle}
                >
                    Menu
                </button>
                {open && (
                    <ul className="mt-2 absolute bg-white shadow-lg rounded-lg z-10">
                        {/* Menu Item 1 */}
                        <li>
                            <button
                                className="flex justify-between w-full
                                text-left py-2 px-4 hover:bg-gray-200"
                                onClick={() => handleSubMenuToggle(1)}
                            >
                                Courses
                                <span
                                    className={`transform transition-transform
                                    ${subMenuOpen === 1 ? "rotate-180" : ""
                                        }`}
                                >
                                    ▼
                                </span>
                            </button>
                            {subMenuOpen === 1 && (
                                <ul className="ml-4 mt-2 bg-gray-100 rounded-lg">
                                    <li>
                                        <button className="block text-left py-2
                                        px-4 hover:bg-gray-200">
                                            Web Development
                                        </button>
                                    </li>
                                    <li>
                                        <button className="block text-left py-2 
                                        px-4 hover:bg-gray-200">
                                            Data Science
                                        </button>
                                    </li>
                                </ul>
                            )}
                        </li>
                        {/* Menu Item 2 */}
                        <li>
                            <button
                                className="flex justify-between w-full text-left
                                py-2 px-4 hover:bg-gray-200"
                                onClick={() => handleSubMenuToggle(2)}
                            >
                                Resources
                                <span
                                    className={`transform transition-transform
                                    ${subMenuOpen === 2 ? "rotate-180" : ""
                                        }`}
                                >
                                    ▼
                                </span>
                            </button>
                            {subMenuOpen === 2 && (
                                <ul className="ml-4 mt-2 bg-gray-100 rounded-lg">
                                    <li>
                                        <button className="block text-left py-2
                                        px-4 hover:bg-gray-200">
                                            Blogs
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                        
                                            className="flex justify-between w-full 
                                            text-left py-2 px-4 hover:bg-gray-200"
                                            onClick={() => handleSubMenuToggle(3)}
                                        >
                                            Tutorials
                                            <span
                                                className={`transform 
                                                transition-transform 
                                                ${subMenuOpen === 3 ? 
                                                "rotate-180" : ""
                                                    }`}
                                            ></span>
                                        </button>
                                        {subMenuOpen === 3 && (
                                            <ul className="ml-4 mt-2 
                                            bg-gray-100 rounded-lg">
                                                <li>
                                                    <button className=
                                                    "block text-left 
                                                    py-2 px-4 hover:bg-gray-200">
                                                        Java
                                                    </button>
                                                </li>
                                                <li>
                                                    <button className=
                                                    "block text-left py-2
                                                    px-4 hover:bg-gray-200">
                                                        Python
                                                    </button>
                                                </li>
                                                <li>
                                                    <button className=
                                                    "block text-left py-2 
                                                    px-4 hover:bg-gray-200">
                                                        C++
                                                    </button>
                                                </li>
                                                <li>
                                                    <button className="
                                                    block text-left py-2
                                                    px-4 hover:bg-gray-200">
                                                        JavaScript
                                                    </button>
                                                </li>
                                            </ul>
                                        )}
                                    </li>
                                </ul>
                            )}
                        </li>
                        {/* Menu Item 3 */}
                        <li>
                            <button className="w-full text-left py-2 px-4 
                            hover:bg-gray-200">
                                Contact
                            </button>
                        </li>
                        {/* Additional Menu Item 4 */}
                        <li>
                            <button className="w-full text-left py-2 px-4 
                            hover:bg-gray-200">
                                About Us
                            </button>
                        </li>
                        {/* Additional Menu Item 5 */}
                        <li>
                            <button className="w-full text-left py-2 px-4
                            hover:bg-gray-200">
                                Services
                            </button>
                        </li>
                        {/* Additional Menu Item 6 */}
                        <li>
                            <button className="w-full text-left py-2 px-4
                            hover:bg-gray-200">
                                Testimonials
                            </button>
                        </li>
                    </ul>
                )}
            </nav>
        </div>
    );
};

export default FlyoutMenu;

JavaScript

// page/index.js

import Head from 'next/head';
import FlyoutMenu from './components/FlyoutMenu';

export default function Home() {
    return (
        <div className="min-h-screen flex items-center justify-center">
            <Head>
                <title>EdTech Flyout Menu</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <FlyoutMenu />
        </div>
    );
}

JavaScript

//tailwind.config.js

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

To run the application use the command

npm run dev

Output

Create FAQs using Next.js and Tailwind CSS

shnwaz_solves

Improve

Article Tags :

Create Flyout Menus using Next.js and Tailwind CSS

Prerequisites

Approach For Creating Flyout Menus

Steps to Create Flyout Menus

Step 1: Set up the Next.js project

Step 2: Install Tailwind CSS

Step 3: Update globals.css

Project Structure

Updated Dependencies:

Similar Reads

Thank You!

What kind of Experience do you want to share?