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

Basic usage

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].

Animations

Slide up animation

Mega menu with slide up animation.

Options

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.

Tabs as inner menu New

This example showcases a mega menu featuring tabs within its dropdown.

Mega Menu to Overlay on Mobile Resoultion New

This example showcases a mega menu changing from a dropdown style to offcanvas overlay on mobile resolution.

Columns

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