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.
To start using the mega menu component you need to import it from flowbite-react:
import { MegaMenu } from "flowbite-react";
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 full screen
Toggle tablet view
Toggle mobile view
Toggle RTL mode
Toggle dark mode
Copy to clipboard
import {
Button,
MegaMenu,
MegaMenuDropdown,
NavbarBrand,
NavbarCollapse,
NavbarLink,
NavbarToggle,
} from "flowbite-react";
function Component() {
return (
<MegaMenu>
<NavbarBrand href="/">
<img alt="" src="/favicon.svg" className="mr-3 h-6 sm:h-9" />
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
</NavbarBrand>
<div className="order-2 hidden items-center md:flex">
<a
href="#"
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 md:mr-2 md:px-5 md:py-2.5 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800"
>
Login
</a>
<Button href="#">Sign up</Button>
</div>
<NavbarToggle />
<NavbarCollapse>
<NavbarLink href="#">Home</NavbarLink>
<NavbarLink>
<MegaMenuDropdown toggle={<>Company</>}>
<ul className="grid grid-cols-3">
<div className="space-y-4 p-4">
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
About Us
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
Library
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
Resources
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
Pro Version
</a>
</li>
</div>
<div className="space-y-4 p-4">
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
Contact Us
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
Support Center
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
Terms
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
Blog
</a>
</li>
</div>
<div className="space-y-4 p-4">
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
Newsletter
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
Playground
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 dark:hover:text-primary-500">
License
</a>
</li>
</div>
</ul>
</MegaMenuDropdown>
</NavbarLink>
<NavbarLink href="#">Team</NavbarLink>
<NavbarLink href="#">Contact</NavbarLink>
</NavbarCollapse>
</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 full screen
Toggle tablet view
Toggle mobile view
Toggle RTL mode
Toggle dark mode
Copy to clipboard
import {
Button,
MegaMenu,
MegaMenuDropdown,
NavbarBrand,
NavbarCollapse,
NavbarLink,
NavbarToggle,
} from "flowbite-react";
function Component() {
return (
<MegaMenu>
<NavbarBrand href="/">
<img alt="" src="/favicon.svg" className="mr-3 h-6 sm:h-9" />
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
</NavbarBrand>
<div className="order-2 hidden items-center md:flex">
<a
href="#"
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 md:mr-2 md:px-5 md:py-2.5 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800"
>
Login
</a>
<Button href="#">Sign up</Button>
</div>
<NavbarToggle />
<NavbarCollapse>
<NavbarLink href="#">Home</NavbarLink>
<MegaMenuDropdown toggle={<>Company</>}>
<ul className="grid grid-cols-3">
<div className="space-y-4 p-4">
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
</svg>
About Us
</a>
</li>
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="m1.56 6.245 8 3.924a1 1 0 0 0 .88 0l8-3.924a1 1 0 0 0 0-1.8l-8-3.925a1 1 0 0 0-.88 0l-8 3.925a1 1 0 0 0 0 1.8Z" />
<path d="M18 8.376a1 1 0 0 0-1 1v.163l-7 3.434-7-3.434v-.163a1 1 0 0 0-2 0v.786a1 1 0 0 0 .56.9l8 3.925a1 1 0 0 0 .88 0l8-3.925a1 1 0 0 0 .56-.9v-.786a1 1 0 0 0-1-1Z" />
<path d="M17.993 13.191a1 1 0 0 0-1 1v.163l-7 3.435-7-3.435v-.163a1 1 0 1 0-2 0v.787a1 1 0 0 0 .56.9l8 3.925a1 1 0 0 0 .88 0l8-3.925a1 1 0 0 0 .56-.9v-.787a1 1 0 0 0-1-1Z" />
</svg>
Library
</a>
</li>
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 18 18"
>
<path d="M15.977.783A1 1 0 0 0 15 0H3a1 1 0 0 0-.977.783L.2 9h4.239a2.99 2.99 0 0 1 2.742 1.8 1.977 1.977 0 0 0 3.638 0A2.99 2.99 0 0 1 13.561 9H17.8L15.977.783ZM6 2h6a1 1 0 1 1 0 2H6a1 1 0 0 1 0-2Zm7 5H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Z" />
<path d="M1 18h16a1 1 0 0 0 1-1v-6h-4.439a.99.99 0 0 0-.908.6 3.978 3.978 0 0 1-7.306 0 .99.99 0 0 0-.908-.6H0v6a1 1 0 0 0 1 1Z" />
</svg>
Resources
</a>
</li>
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="m7.164 3.805-4.475.38L.327 6.546a1.114 1.114 0 0 0 .63 1.89l3.2.375 3.007-5.006ZM11.092 15.9l.472 3.14a1.114 1.114 0 0 0 1.89.63l2.36-2.362.38-4.475-5.102 3.067Zm8.617-14.283A1.613 1.613 0 0 0 18.383.291c-1.913-.33-5.811-.736-7.556 1.01-1.98 1.98-6.172 9.491-7.477 11.869a1.1 1.1 0 0 0 .193 1.316l.986.985.985.986a1.1 1.1 0 0 0 1.316.193c2.378-1.3 9.889-5.5 11.869-7.477 1.746-1.745 1.34-5.643 1.01-7.556Zm-3.873 6.268a2.63 2.63 0 1 1-3.72-3.72 2.63 2.63 0 0 1 3.72 3.72Z" />
</svg>
Pro Version
</a>
</li>
</div>
<div className="space-y-4 p-4">
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M19 4h-1a1 1 0 1 0 0 2v11a1 1 0 0 1-2 0V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V5a1 1 0 0 0-1-1ZM3 4a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm9 13H4a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-3H4a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-3H4a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-3h-2a1 1 0 0 1 0-2h2a1 1 0 1 1 0 2Zm0-3h-2a1 1 0 0 1 0-2h2a1 1 0 1 1 0 2Z" />
<path d="M6 5H5v1h1V5Z" />
</svg>
Blog
</a>
</li>
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z" />
</svg>
Newsletter
</a>
</li>
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 18 18"
>
<path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10ZM17 13h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2Z" />
</svg>
Playground
</a>
</li>
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 14 20"
>
<path d="M13.383.076a1 1 0 0 0-1.09.217L11 1.586 9.707.293a1 1 0 0 0-1.414 0L7 1.586 5.707.293a1 1 0 0 0-1.414 0L3 1.586 1.707.293A1 1 0 0 0 0 1v18a1 1 0 0 0 1.707.707L3 18.414l1.293 1.293a1 1 0 0 0 1.414 0L7 18.414l1.293 1.293a1 1 0 0 0 1.414 0L11 18.414l1.293 1.293A1 1 0 0 0 14 19V1a1 1 0 0 0-.617-.924ZM10 15H4a1 1 0 1 1 0-2h6a1 1 0 0 1 0 2Zm0-4H4a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2Zm0-4H4a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2Z" />
</svg>
License
</a>
</li>
</div>
<div className="space-y-4 p-4">
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 14 20"
>
<path d="M12 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM7.5 17.5h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2ZM12 13H2V4h10v9Z" />
</svg>
Contact Us
</a>
</li>
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 21 21"
>
<path d="m5.4 2.736 3.429 3.429A5.046 5.046 0 0 1 10.134 6c.356.01.71.06 1.056.147l3.41-3.412c.136-.133.287-.248.45-.344A9.889 9.889 0 0 0 10.269 1c-1.87-.041-3.713.44-5.322 1.392a2.3 2.3 0 0 1 .454.344Zm11.45 1.54-.126-.127a.5.5 0 0 0-.706 0l-2.932 2.932c.029.023.049.054.078.077.236.194.454.41.65.645.034.038.078.067.11.107l2.927-2.927a.5.5 0 0 0 0-.707Zm-2.931 9.81c-.024.03-.057.052-.081.082a4.963 4.963 0 0 1-.633.639c-.041.036-.072.083-.115.117l2.927 2.927a.5.5 0 0 0 .707 0l.127-.127a.5.5 0 0 0 0-.707l-2.932-2.931Zm-1.442-4.763a3.036 3.036 0 0 0-1.383-1.1l-.012-.007a2.955 2.955 0 0 0-1-.213H10a2.964 2.964 0 0 0-2.122.893c-.285.29-.509.634-.657 1.013l-.01.016a2.96 2.96 0 0 0-.21 1 2.99 2.99 0 0 0 .489 1.716c.009.014.022.026.032.04a3.04 3.04 0 0 0 1.384 1.1l.012.007c.318.129.657.2 1 .213.392.015.784-.05 1.15-.192.012-.005.02-.013.033-.018a3.011 3.011 0 0 0 1.676-1.7v-.007a2.89 2.89 0 0 0 0-2.207 2.868 2.868 0 0 0-.27-.515c-.007-.012-.02-.025-.03-.039Zm6.137-3.373a2.53 2.53 0 0 1-.35.447L14.84 9.823c.112.428.166.869.16 1.311-.01.356-.06.709-.147 1.054l3.413 3.412c.132.134.249.283.347.444A9.88 9.88 0 0 0 20 11.269a9.912 9.912 0 0 0-1.386-5.319ZM14.6 19.264l-3.421-3.421c-.385.1-.781.152-1.18.157h-.134c-.356-.01-.71-.06-1.056-.147l-3.41 3.412a2.503 2.503 0 0 1-.443.347A9.884 9.884 0 0 0 9.732 21H10a9.9 9.9 0 0 0 5.044-1.388 2.519 2.519 0 0 1-.444-.348ZM1.735 15.6l3.426-3.426a4.608 4.608 0 0 1-.013-2.367L1.735 6.4a2.507 2.507 0 0 1-.35-.447 9.889 9.889 0 0 0 0 10.1c.1-.164.217-.316.35-.453Zm5.101-.758a4.957 4.957 0 0 1-.651-.645c-.033-.038-.077-.067-.11-.107L3.15 17.017a.5.5 0 0 0 0 .707l.127.127a.5.5 0 0 0 .706 0l2.932-2.933c-.03-.018-.05-.053-.078-.076ZM6.08 7.914c.03-.037.07-.063.1-.1.183-.22.384-.423.6-.609.047-.04.082-.092.129-.13L3.983 4.149a.5.5 0 0 0-.707 0l-.127.127a.5.5 0 0 0 0 .707L6.08 7.914Z" />
</svg>
Support Center
</a>
</li>
<li>
<a href="#" className="group flex items-center hover:text-primary-600 dark:hover:text-primary-500">
<svg
className="me-2 h-3 w-3 text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 18 20"
>
<path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z" />
</svg>
Terms
</a>
</li>
</div>
</ul>
</MegaMenuDropdown>
<NavbarLink href="#">Team</NavbarLink>
</NavbarCollapse>
</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 full screen
Toggle tablet view
Toggle mobile view
Toggle RTL mode
Toggle dark mode
Copy to clipboard
import {
MegaMenu,
MegaMenuDropdown,
MegaMenuDropdownToggle,
NavbarBrand,
NavbarCollapse,
NavbarLink,
NavbarToggle,
} from "flowbite-react";
import { HiChevronDown } from "react-icons/hi";
function Component() {
return (
<MegaMenu>
<NavbarBrand href="/">
<img alt="" src="/favicon.svg" className="mr-3 h-6 sm:h-9" />
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
</NavbarBrand>
<NavbarToggle />
<NavbarCollapse>
<NavbarLink href="/">Home</NavbarLink>
<NavbarLink as="span">
<MegaMenuDropdownToggle>
Company
<HiChevronDown className="ml-2" />
</MegaMenuDropdownToggle>
</NavbarLink>
<NavbarLink href="/">Marketplace</NavbarLink>
<NavbarLink href="/">Resources</NavbarLink>
<NavbarLink href="/">Contact</NavbarLink>
</NavbarCollapse>
<MegaMenuDropdown>
<ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
<li>
<a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
<div className="font-semibold">Online Stores</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
Connect with third-party tools that you're already using.
</span>
</a>
</li>
<li>
<a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
<div className="font-semibold">Segmentation</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
Connect with third-party tools that you're already using.
</span>
</a>
</li>
<li>
<a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
<div className="font-semibold">Marketing CRM</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
Connect with third-party tools that you're already using.
</span>
</a>
</li>
<li>
<a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
<div className="font-semibold">Online Stores</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
Connect with third-party tools that you're already using.
</span>
</a>
</li>
<li>
<a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
<div className="font-semibold">Segmentation</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
Connect with third-party tools that you're already using.
</span>
</a>
</li>
<li>
<a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
<div className="font-semibold">Marketing CRM</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
Connect with third-party tools that you're already using.
</span>
</a>
</li>
<li>
<a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
<div className="font-semibold">Audience Management</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
Connect with third-party tools that you're already using.
</span>
</a>
</li>
<li>
<a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
<div className="font-semibold">Creative Tools</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
Connect with third-party tools that you're already using.
</span>
</a>
</li>
<li>
<a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
<div className="font-semibold">Marketing Automation</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
Connect with third-party tools that you're already using.
</span>
</a>
</li>
</ul>
</MegaMenuDropdown>
</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 full screen
Toggle tablet view
Toggle mobile view
Toggle RTL mode
Toggle dark mode
Copy to clipboard
import {
MegaMenu,
MegaMenuDropdown,
MegaMenuDropdownToggle,
NavbarBrand,
NavbarCollapse,
NavbarLink,
NavbarToggle,
} from "flowbite-react";
import { HiArrowRight, HiChevronDown } from "react-icons/hi";
function Component() {
return (
<MegaMenu>
<NavbarBrand href="/">
<img alt="" src="/favicon.svg" className="mr-3 h-6 sm:h-9" />
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
</NavbarBrand>
<NavbarToggle />
<NavbarCollapse>
<NavbarLink href="/">Home</NavbarLink>
<MegaMenuDropdownToggle>
Company
<HiChevronDown className="ml-2" />
</MegaMenuDropdownToggle>
<NavbarLink href="/">Marketplace</NavbarLink>
<NavbarLink href="/">Resources</NavbarLink>
<NavbarLink href="/">Contact</NavbarLink>
</NavbarCollapse>
<MegaMenuDropdown>
<div className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 text-sm shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400">
<ul className="space-y-4 sm:mb-4 md:mb-0">
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Online Stores
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Segmentation
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Marketing CRM
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Online Stores
</a>
</li>
</ul>
<ul className="mb-4 hidden space-y-4 sm:block md:mb-0">
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Our Blog
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Terms & Conditions
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
License
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Resources
</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">
At Flowbite, we have a portfolio of brands that cater to a variety of preferences.
</p>
<a
href="#"
className="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-700"
>
Explore our brands
<span className="sr-only">Explore our brands</span>
<HiArrowRight className="ml-2" />
</a>
</div>
</div>
</MegaMenuDropdown>
</MegaMenu>
);
}Full width with image#
This example can be used to also show a CTA with a background image inside the dropdown next to the other menu items and links.
Edit on GitHub
Toggle full screen
Toggle tablet view
Toggle mobile view
Toggle RTL mode
Toggle dark mode
Copy to clipboard
import {
MegaMenu,
MegaMenuDropdown,
MegaMenuDropdownToggle,
NavbarBrand,
NavbarCollapse,
NavbarLink,
NavbarToggle,
} from "flowbite-react";
import { HiArrowRight, HiChevronDown } from "react-icons/hi";
function Component() {
return (
<MegaMenu>
<NavbarBrand href="#">
<img alt="" src="/favicon.svg" className="mr-3 h-6 sm:h-9" />
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
</NavbarBrand>
<NavbarToggle />
<NavbarCollapse>
<NavbarLink href="#">Home</NavbarLink>
<MegaMenuDropdownToggle>
Company
<HiChevronDown className="ml-2" />
</MegaMenuDropdownToggle>
<NavbarLink href="#">Marketplace</NavbarLink>
<NavbarLink href="#">Resources</NavbarLink>
<NavbarLink href="#">Contact</NavbarLink>
</NavbarCollapse>
<MegaMenuDropdown>
<div className="mt-6 border-y border-gray-200 bg-white shadow-sm dark:border-gray-600 dark:bg-gray-800">
<div className="mx-auto grid max-w-screen-xl px-4 py-5 text-sm text-gray-500 md:grid-cols-3 md:px-6 dark:text-gray-400">
<ul className="mb-4 hidden space-y-4 md:mb-0 md:block" aria-labelledby="mega-menu-full-image-button">
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Online Stores
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Segmentation
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Marketing CRM
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Online Stores
</a>
</li>
</ul>
<ul className="mb-4 space-y-4 md:mb-0">
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Our Blog
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Terms & Conditions
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
License
</a>
</li>
<li>
<a href="#" className="hover:text-primary-600 hover:underline dark:hover:text-primary-500">
Resources
</a>
</li>
</ul>
<a
href="#"
className="rounded-lg bg-gray-500 bg-cover bg-local bg-center bg-no-repeat p-8 text-left bg-blend-multiply hover:bg-blend-soft-light dark:hover:bg-blend-darken"
style={{
backgroundImage: 'url("/dashboard-overview.png")',
}}
>
<p className="mb-5 max-w-xl font-extrabold leading-tight tracking-tight text-white">
Preview the new Flowbite dashboard navigation.
</p>
<button
type="button"
className="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"
>
Get started
<HiArrowRight className="ml-2" />
</button>
</a>
</div>
</div>
</MegaMenuDropdown>
</MegaMenu>
);
}Theme#
Note:
<MegaMenu>'s theme has all of the same options as<Navbar>'s, with slightly different defaults<MegaMenuDropdown toggle={..} />'s theme,megaMenu.dropdown.toggle, is identical to<Dropdown>, with slightly different defaults
{
"root": {
"base": "bg-white px-2 py-2.5 sm:px-4 dark:border-gray-700 dark:bg-gray-800",
"rounded": {
"on": "rounded",
"off": ""
},
"bordered": {
"on": "border",
"off": ""
},
"inner": {
"base": "mx-auto flex flex-wrap items-center justify-between",
"fluid": {
"on": "",
"off": "container"
}
}
},
"brand": {
"base": "flex items-center"
},
"collapse": {
"base": "w-full md:block md:w-auto",
"list": "mt-4 flex flex-col md:mt-0 md:flex-row md:space-x-8 md:text-sm md:font-medium",
"hidden": {
"on": "hidden",
"off": ""
}
},
"link": {
"base": "block py-2 pl-3 pr-4 md:p-0",
"active": {
"on": "bg-primary-700 text-white md:bg-transparent md:text-primary-700 dark:text-white",
"off": "border-b border-gray-100 text-gray-700 hover:bg-gray-50 md:border-0 md:hover:bg-transparent md:hover:text-primary-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-white"
},
"disabled": {
"on": "text-gray-400 hover:cursor-not-allowed dark:text-gray-600",
"off": ""
}
},
"toggle": {
"base": "inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
"icon": "h-6 w-6 shrink-0"
},
"dropdown": {
"base": "",
"toggle": {
"arrowIcon": "ml-2 h-4 w-4",
"content": "py-1 focus:outline-none",
"floating": {
"animation": "transition-opacity",
"arrow": {
"base": "absolute z-10 h-2 w-2 rotate-45",
"style": {
"dark": "bg-gray-900 dark:bg-gray-700",
"light": "bg-white",
"auto": "bg-white dark:bg-gray-700"
},
"placement": "-4px"
},
"base": "z-10 w-fit divide-y divide-gray-100 rounded shadow focus:outline-none mt-2 block",
"content": "py-1 text-sm text-gray-500 dark:text-gray-400",
"divider": "my-1 h-px bg-gray-100 dark:bg-gray-600",
"header": "block px-4 py-2 text-sm text-gray-700 dark:text-gray-200",
"hidden": "invisible opacity-0",
"item": {
"container": "",
"base": "flex w-full cursor-pointer items-center justify-start px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:bg-gray-600 dark:focus:text-white",
"icon": "mr-2 h-4 w-4"
},
"style": {
"dark": "bg-gray-900 text-white dark:bg-gray-700",
"light": "border border-gray-200 bg-white text-gray-900",
"auto": "border border-gray-200 bg-white dark:border-none dark:bg-gray-700 text-gray-500 dark:text-gray-400"
},
"target": "w-fit"
},
"inlineWrapper": "flex w-full items-center justify-between"
}
},
"dropdownToggle": {
"base": "py-2 pl-3 pr-4 md:p-0 border-b border-gray-100 text-gray-700 hover:bg-gray-50 md:border-0 md:hover:bg-transparent md:hover:text-primary-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-white flex w-full items-center justify-between"
}
}