1. Navbars
  2. Mega Menu


Tailwind CSS Mega Menu

Documentation and examples of our powerful and responsive mega menu.

Requires JS

Basic usage


A basic form of the mega menu.

Hover event

The default trigger mode is click, you can change it to hover using the data-hs-mega-menu-trigger="hover".


Slide up animation

Mega menu with slide up animation.


Auto close behavior

By default, the mega menu is closed when clicking inside or outside the mega menu. You can use the data-hs-mega-menu-auto-close="true | false" option to change this behavior of the mega menu.