1. Components
  2. Mega Menu

Navigations

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.

Learn more

Example

A basic form of the mega menu.

Hover event

The default trigger mode is click, you can change it to hover using the class [--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 class [--auto-close:true | false] option to change this behavior of the mega menu.

Columns New

Adjust the size width of the mega menu, when using less columns or when the content of the container is less.