1. Navbars
  2. Mega Menu

Components

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.

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.