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
project structureUpdated 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;
// 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>
);
}
//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