React Mega Menu - Flowbite
Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles
The mega menu component is a full-width dropdown that can be triggered by clicking on the menu item and it shows a list of links that you can use to navigate through the pages on a website.
Start using the list group component by first importing it from Flowbite React:
'use client';
import { MegaMenu } from 'flowbite-react';
Table of Contents#
- Default mega menu
- Mega menu with icons
- Full width dropdown
- Full width with CTA
- Full width with image
- Theme
- References
Default mega menu#
Use this example to show a list of links aligned on three columns inside the mega menu dropdown.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { MegaMenu } from 'flowbite-react';
export default function DefaultMegaMenu() {
return (
<MegaMenu>
<div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4 md:space-x-8">
<Navbar.Brand href="/">
<img
alt=""
className="mr-3 h-6 sm:h-9"
src="https://flowbite.com/docs/images/logo.svg"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<div className="order-2 hidden items-center md:flex">
<a
className="mr-1 rounded-lg px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 md:mr-2 md:px-5 md:py-2.5"
href="#"
>
<p>
Login
</p>
</a>
<Button href="#">
Sign up
</Button>
<Navbar.Toggle />
</div>
<Navbar.Collapse>
<Navbar.Link href="/">
Home
</Navbar.Link>
<Navbar.Link href="#">
<MegaMenu.Collapse dropdown="Company">
<ul className="grid grid-cols-3">
<div className="space-y-4 p-4">
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
About Us
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Library
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Resources
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Pro Version
</p>
</a>
</li>
</div>
<div className="space-y-4 p-4">
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Contact Us
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Support Center
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Terms
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Blog
</p>
</a>
</li>
</div>
<div className="space-y-4 p-4">
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Newsletter
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Playground
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
License
</p>
</a>
</li>
</div>
</ul>
</MegaMenu.Collapse>
</Navbar.Link>
<Navbar.Link href="/">
Team
</Navbar.Link>
<Navbar.Link href="/">
Contact
</Navbar.Link>
</Navbar.Collapse>
</div>
</MegaMenu>
)
}
Mega menu with icons#
This example of a mega menu dropdown can be used to also show an icon near the text of the link.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { MegaMenu } from 'flowbite-react';
export default function () {
return (
<MegaMenu>
<div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4 md:space-x-8">
<Navbar.Brand href="/">
<img
alt=""
className="mr-3 h-6 sm:h-9"
src="https://flowbite.com/docs/images/logo.svg"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<div className="order-2 hidden items-center md:flex">
<a
className="mr-1 rounded-lg px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 md:mr-2 md:px-5 md:py-2.5"
href="#"
>
<p>
Login
</p>
</a>
<Button href="#">
Sign up
</Button>
<Navbar.Toggle />
</div>
<Navbar.Collapse>
<Navbar.Link href="/">
Home
</Navbar.Link>
<Navbar.Link href="#">
<MegaMenu.Collapse dropdown="Company">
<ul className="grid grid-cols-3">
<div className="space-y-4 p-4">
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
About Us
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Library
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Resources
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Pro Version
</p>
</a>
</li>
</div>
<div className="space-y-4 p-4">
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Contact Us
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Support Center
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Terms
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Blog
</p>
</a>
</li>
</div>
<div className="space-y-4 p-4">
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Newsletter
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
Playground
</p>
</a>
</li>
<li>
<a
className="hover:text-primary-600 hover:underline dark:hover:text-primary-500"
href="#"
>
<p>
License
</p>
</a>
</li>
</div>
</ul>
</MegaMenu.Collapse>
</Navbar.Link>
<Navbar.Link href="/">
Team
</Navbar.Link>
<Navbar.Link href="/">
Contact
</Navbar.Link>
</Navbar.Collapse>
</div>
</MegaMenu>
)
}
Full width dropdown#
Use this example to show a mega menu dropdown that spans the entire width of the document page.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { MegaMenu } from 'flowbite-react';
export default function FullWidthDropdown() {
return (
<MegaMenu>
<Navbar.Brand href="/">
<img
alt=""
className="mr-3 h-6 sm:h-9"
src="https://flowbite.com/docs/images/logo.svg"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Navbar.Link href="/">
Home
</Navbar.Link>
<Navbar.Link href="#">
<MegaMenu.Toggle>
<p>
Company
</p>
<HiChevronDown className="ml-2" />
</MegaMenu.Toggle>
</Navbar.Link>
<Navbar.Link href="/">
Marketplace
</Navbar.Link>
<Navbar.Link href="/">
Resources
</Navbar.Link>
<Navbar.Link href="/">
Contact
</Navbar.Link>
</Navbar.Collapse>
<MegaMenu.Collapse>
<ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-4 py-5 sm:grid-cols-2 md:grid-cols-3 md:px-6">
<li>
<a
className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700"
href="#"
>
<div className="font-semibold">
Online Stores
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
<p>
Connect with third-party tools that you're already using.
</p>
</span>
</a>
</li>
<li>
<a
className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700"
href="#"
>
<div className="font-semibold">
Segmentation
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
<p>
Connect with third-party tools that you're already using.
</p>
</span>
</a>
</li>
<li>
<a
className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700"
href="#"
>
<div className="font-semibold">
Marketing CRM
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
<p>
Connect with third-party tools that you're already using.
</p>
</span>
</a>
</li>
<li>
<a
className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700"
href="#"
>
<div className="font-semibold">
Online Stores
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
<p>
Connect with third-party tools that you're already using.
</p>
</span>
</a>
</li>
<li>
<a
className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700"
href="#"
>
<div className="font-semibold">
Segmentation
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
<p>
Connect with third-party tools that you're already using.
</p>
</span>
</a>
</li>
<li>
<a
className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700"
href="#"
>
<div className="font-semibold">
Marketing CRM
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
<p>
Connect with third-party tools that you're already using.
</p>
</span>
</a>
</li>
<li>
<a
className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700"
href="#"
>
<div className="font-semibold">
Audience Management
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
<p>
Connect with third-party tools that you're already using.
</p>
</span>
</a>
</li>
<li>
<a
className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700"
href="#"
>
<div className="font-semibold">
Creative Tools
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
<p>
Connect with third-party tools that you're already using.
</p>
</span>
</a>
</li>
<li>
<a
className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700"
href="#"
>
<div className="font-semibold">
Marketing Automation
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
<p>
Connect with third-party tools that you're already using.
</p>
</span>
</a>
</li>
</ul>
</MegaMenu.Collapse>
</MegaMenu>
)
}
Full width with CTA#
This example can be used to also show a CTA button or link next to the menu items inside the dropdown.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { import { MegaMenu, Navbar } from 'flowbite-react'; } from 'flowbite-react';
import { HiArrowRight, HiChevronDown } from 'react-icons/hi';
export default function FullWidthWithCTA() {
return (
<MegaMenu>
<Navbar.Brand href="/">
<img
alt=""
className="mr-3 h-6 sm:h-9"
src="https://flowbite.com/docs/images/logo.svg"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Navbar.Link href="/">
Home
</Navbar.Link>
<Navbar.Link href="#">
<MegaMenu.Toggle>
<p>
Company
</p>
<HiChevronDown className="ml-2" />
</MegaMenu.Toggle>
</Navbar.Link>
<Navbar.Link href="/">
Marketplace
</Navbar.Link>
<Navbar.Link href="/">
Resources
</Navbar.Link>
<Navbar.Link href="/">
Contact
</Navbar.Link>
</Navbar.Collapse>
<MegaMenu.Collapse>
<div className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-4 py-5 text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6">
<ul className="space-y-4 sm:mb-4 md:mb-0">
<li>
<a
className="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Online Stores
</p>
</a>
</li>
<li>
<a
className="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Segmentation
</p>
</a>
</li>
<li>
<a
className="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Marketing CRM
</p>
</a>
</li>
<li>
<a
className="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Online Stores
</p>
</a>
</li>
</ul>
<ul className="mb-4 hidden space-y-4 sm:block md:mb-0">
<li>
<a
className="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Our Blog
</p>
</a>
</li>
<li>
<a
className="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Terms & Conditions
</p>
</a>
</li>
<li>
<a
className="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
License
</p>
</a>
</li>
<li>
<a
className="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Resources
</p>
</a>
</li>
</ul>
<div className="mt-4 md:mt-0">
<h2 className="mb-2 font-semibold text-gray-900 dark:text-white">
Our brands
</h2>
<p className="mb-2 text-gray-500 dark:text-gray-400">
<p>
At Flowbite, we have a portfolio of brands that cater to a variety of preferences.
</p>
</p>
<a
className="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-600 hover:underline dark:text-blue-500 dark:hover:text-blue-700"
href="#"
>
<p>
Explore our brands
<span className="sr-only">
Explore our brands
</span>
</p>
<HiArrowRight className="ml-2" />
</a>
</div>
</div>
</MegaMenu.Collapse>
</MegaMenu>
)
}
Full width with image#
This example can be used to also show a CTA with a backdround image inside the dropdown next to the other menu items and links.
Edit on GitHub
Toggle dark mode
- React TypeScript
'use client';
import { import { Button, MegaMenu, Navbar } from 'flowbite-react'; } from 'flowbite-react';
import { HiArrowRight } from 'react-icons/hi';
export default function FullWidthWithImage() {
return (
<MegaMenu>
<Navbar.Brand href="/">
<img
alt=""
className="mr-3 h-6 sm:h-9"
src="https://flowbite.com/docs/images/logo.svg"
/>
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Flowbite
</span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Navbar.Link href="/">
Home
</Navbar.Link>
<Navbar.Link href="/">
Company
</Navbar.Link>
<Navbar.Link href="#">
<MegaMenu.Toggle>
<p>
Marketplace
</p>
<HiChevronDown className="ml-2" />
</MegaMenu.Toggle>
</Navbar.Link>
<Navbar.Link href="/">
Resources
</Navbar.Link>
<Navbar.Link href="/">
Contact
</Navbar.Link>
</Navbar.Collapse>
<MegaMenu.Collapse>
<div className="mt-1 border-y border-gray-200 bg-white shadow-sm dark:border-gray-600 dark:bg-gray-800">
<div class="mx-auto grid max-w-screen-xl px-4 py-5 text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6">
<ul
aria-labelledby="mega-menu-full-image-button"
class="mb-4 hidden space-y-4 md:mb-0 md:block"
>
<li>
<a
class="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Online Stores
</p>
</a>
</li>
<li>
<a
class="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Segmentation
</p>
</a>
</li>
<li>
<a
class="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Marketing CRM
</p>
</a>
</li>
<li>
<a
class="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Online Stores
</p>
</a>
</li>
</ul>
<ul class="mb-4 space-y-4 md:mb-0">
<li>
<a
class="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Our Blog
</p>
</a>
</li>
<li>
<a
class="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Terms & Conditions
</p>
</a>
</li>
<li>
<a
class="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
License
</p>
</a>
</li>
<li>
<a
class="hover:text-blue-600 hover:underline dark:hover:text-blue-500"
href="#"
>
<p>
Resources
</p>
</a>
</li>
</ul>
<a
class="rounded-lg bg-gray-500 p-8 text-left"
href="#"
>
<p class="mb-5 max-w-xl font-extrabold leading-tight tracking-tight text-white">
<p>
Preview the new Flowbite dashboard navigation.
</p>
</p>
<button
class="inline-flex items-center rounded-lg border border-white px-2.5 py-1.5 text-center text-xs font-medium text-white hover:bg-white hover:text-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-700"
type="button"
>
<p>
Get started
</p>
<HiArrowRight className="ml-2" />
</button>
</a>
</div>
</div>
</MegaMenu.Collapse>
</MegaMenu>
)
}
Theme#
This component is a work in progress, and currently doesn't have a theme. It may in future updates.
To learn more about how to customize the appearance of components, please see the Theme docs.