Open In App

Create Flyout Menus using Next.js and Tailwind CSS

Last Updated : 04 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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

folderStructure
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


Next Article
Create Select Menus UI Using Next.JS and Tailwind CSS
author
shnwaz_solves
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox