Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI
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
Sample Code
Show 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
Sample Code
Show 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
Sample Code
Show Code
Copy Code
import FullLogo from '@/app/components/layout/logo'
import {
MegaMenu,
MegaMenuDropdown,
MegaMenuDropdownToggle,
Navbar,
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-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>
</div>
)
}
export default FullWidthMegamenuCode