Component Library
Browse and explore components
Megamenu
A Megamenu is a UI component that displays a large, multi-column dropdown menu for easy access to many navigation options.
Default Mega Menu
Component Code
Copy Code
import {
MegaMenu,
Button,
NavbarToggle,
NavbarCollapse,
NavbarLink,
MegaMenuDropdown,
} from 'flowbite-react'
import FullLogo from '@/app/components/layout/logo'
const DefaultMegamenuCode = () => {
return (
<div>
<MegaMenu className='rounded-md'>
<div className='mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4 md:space-x-8'>
<FullLogo />
<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 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 md:mr-2 md:px-5 md:py-2.5'>
Login
</a>
<Button href='#' color='primary'>
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>
</div>
</MegaMenu>
</div>
)
}
export default DefaultMegamenuCode
Mega Menu With Icons
Component Code
Copy Code
import {
MegaMenu,
Button,
NavbarToggle,
NavbarCollapse,
NavbarLink,
MegaMenuDropdown,
} from 'flowbite-react'
import FullLogo from '@/app/components/layout/logo'
const MegamenuIconCode = () => {
return (
<div>
<MegaMenu className='rounded-md'>
<div className='mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4 md:space-x-8'>
<FullLogo />
<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 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 md:mr-2 md:px-5 md:py-2.5'>
Login
</a>
<Button href='#' color='primary'>
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='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 href='#'>Team</NavbarLink>
</NavbarCollapse>
</div>
</MegaMenu>
</div>
)
}
export default MegamenuIconCode
Full width dropdown
Component Code
Copy Code
'use client'
import FullLogo from '@/app/components/layout/logo'
import {
MegaMenu,
MegaMenuDropdown,
MegaMenuDropdownToggle,
NavbarCollapse,
NavbarLink,
NavbarToggle,
} from 'flowbite-react'
import { HiChevronDown } from 'react-icons/hi'
const FullWidthMegamenuCode = () => {
return (
<div>
<MegaMenu className='rounded-md'>
<FullLogo />
<NavbarToggle />
<NavbarCollapse>
<NavbarLink href='/'>Home</NavbarLink>
<NavbarLink>
<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-border dark:border-darkborder px-4 py-5 sm:grid-cols-2 md:grid-cols-3 md:px-6'>
<li>
<a
href='#'
className='block rounded-lg p-3 hover:bg-lightprimary dark:hover:bg-darkprimary'>
<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-lightprimary dark:hover:bg-darkprimary'>
<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-lightprimary dark:hover:bg-darkprimary'>
<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-lightprimary dark:hover:bg-darkprimary'>
<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-lightprimary dark:hover:bg-darkprimary'>
<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-lightprimary dark:hover:bg-darkprimary'>
<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-lightprimary dark:hover:bg-darkprimary'>
<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-lightprimary dark:hover:bg-darkprimary'>
<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-lightprimary dark:hover:bg-darkprimary'>
<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>
</div>
)
}
export default FullWidthMegamenuCode
Full Width With CTA
Component Code
Copy Code
'use client'
import FullLogo from '@/app/components/layout/logo'
import {
MegaMenu,
MegaMenuDropdown,
MegaMenuDropdownToggle,
NavbarCollapse,
NavbarLink,
NavbarToggle,
} from 'flowbite-react'
import { HiChevronDown, HiArrowRight } from 'react-icons/hi'
const FullWidthCTACode = () => {
return (
<>
<MegaMenu className='rounded-md'>
<FullLogo />
<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-border dark:border-darkborder 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
href='#'
className='hover:text-primary dark:hover:text-primary'>
Online Stores
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
Segmentation
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
Marketing CRM
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
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 dark:hover:text-primary'>
Our Blog
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
Terms & Conditions
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
License
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
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 hover:text-primaryemphasis dark:text-primary dark:hover:text-primaryemphasis'>
Explore our brands
<span className='sr-only'>Explore our brands</span>
<HiArrowRight className='ml-2' />
</a>
</div>
</div>
</MegaMenuDropdown>
</MegaMenu>
</>
)
}
export default FullWidthCTACode
Full width with image
Component Code
Copy Code
'use client'
import FullLogo from '@/app/components/layout/logo'
import {
MegaMenu,
MegaMenuDropdown,
MegaMenuDropdownToggle,
NavbarCollapse,
NavbarLink,
NavbarToggle,
} from 'flowbite-react'
import { HiChevronDown, HiArrowRight } from 'react-icons/hi'
const FullWidthWithImageCode = () => {
return (
<>
<MegaMenu className='rounded-md'>
<FullLogo />
<NavbarToggle />
<NavbarCollapse>
<NavbarLink href='/'>Home</NavbarLink>
<NavbarLink href='/'>Company</NavbarLink>
<MegaMenuDropdownToggle>
Marketplace
<HiChevronDown className='ml-2' />
</MegaMenuDropdownToggle>
<NavbarLink href='/'>Resources</NavbarLink>
<NavbarLink href='/'>Contact</NavbarLink>
</NavbarCollapse>
<MegaMenuDropdown>
<div className='mt-6 border-y border-border 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 dark:text-gray-400 md:grid-cols-3 md:px-6'>
<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 dark:hover:text-primary'>
Online Stores
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
Segmentation
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
Marketing CRM
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
Online Stores
</a>
</li>
</ul>
<ul className='mb-4 space-y-4 md:mb-0'>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
Our Blog
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
Terms & Conditions
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
License
</a>
</li>
<li>
<a
href='#'
className='hover:text-primary dark:hover:text-primary'>
Resources
</a>
</li>
</ul>
<a href='#' className='rounded-lg bg-primary p-8 text-left'>
<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 cursor-pointer'>
Get started
<HiArrowRight className='ml-2' />
</button>
</a>
</div>
</div>
</MegaMenuDropdown>
</MegaMenu>
</>
)
}
export default FullWidthWithImageCode