Tailwind CSS Mega Menu
Create user-friendly Mega Menus using Tailwind CSS, featuring multi-level dropdown navigation that simplifies content access and improves website experience for users.
Requires JS
Note that this component requires the use of our Dropdown plugin, else you can skip this message if you are already using Preline UI as a package.
Default mega menu
Use a basic mega menu to group navigation links and richer content in one large dropdown panel.
Hover-triggered mega menu
The default trigger mode is click. Switch it to hover with the [--trigger:hover] class.
Auto-close behavior
Use [--auto-close:true|false] to control whether the mega menu closes after interactions inside or outside the panel.
Overlay on mobile New
Transform the mega menu from a desktop dropdown into an offcanvas overlay on smaller screens.