1. Plugins
  3. Mega Menu

Plugins

Tailwind CSS Mega Menu

Documentation and examples of powerful and responsive mega menu.

Image Description

Installation

To get started, install Dropdown plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/dropdown

Example

A basic form of mega menu.

Copy

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <header class="relative flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full">
                          <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
                            <div class="flex items-center justify-between">
                              <a class="flex-none" href="#">Brand</a>
                              <div class="sm:hidden">
                                <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md align-middle" data-hs-collapse="#navbar-mega-menu-collapse-unstyled" aria-controls="navbar-mega-menu-collapse-unstyled" aria-label="Toggle navigation">
                                  <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                                  </svg>
                                  <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                  </svg>
                                </button>
                              </div>
                            </div>
                            <div id="navbar-mega-menu-collapse-unstyled" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block sm:w-auto sm:basis-auto">
                              <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
                                <a class="" href="#" aria-current="page">Active</a>

                                <div class="hs-dropdown [--strategy:static] sm:[--strategy:absolute] [--adaptive:none]">
                                  <button type="button" class="flex items-center w-full text-gray-600 hover:text-gray-400 font-medium dark:text-gray-400 dark:hover:text-gray-500">
                                    Mega Menu
                                    <svg class="ml-2 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                                    </svg>
                                  </button>

                                  <div class="hs-dropdown-menu transition-[opacity,margin] sm:border duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-10 top-full left-0 min-w-[15rem] bg-white sm:shadow-md rounded-lg p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute before:-top-5 before:left-0 before:w-full before:h-5">
                                    <div class="sm:grid sm:grid-cols-3">
                                      <div class="flex flex-col">
                                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                          About
                                        </a>
                                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                          Services
                                        </a>
                                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                          Customer Story
                                        </a>
                                      </div>

                                      <div class="flex flex-col">
                                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                          Careers
                                        </a>
                                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                          Careers: Overview
                                        </a>
                                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                          Careers: Apply
                                        </a>
                                      </div>

                                      <div class="flex flex-col">
                                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                          Log In
                                        </a>
                                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                          Sign Up
                                        </a>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                                <a class="" href="#">Link</a>
                              </div>
                            </div>
                          </nav>
                        </header>

Keyboard interactions

Command Description

Enter

Activates the selected tab

ArrowUp and ArrowDown

Focuses previous/next non-disabled item

Home and End

Focuses first/last non-disabled item

Esc

Closes any open Menus

A-Z a-z

Focuses first item that matches keyboard input

Options

Parameters Description Options Default value
[--placement:*] Specifies the position of the menu when opened top | top-left | top-right | bottom | bottom-left | bottom-right | right | right-top | right-bottom | left | left-top | left-bottom bottom
data-hs-dropdown-transition Data attribute to designate the container to be animated No options
[--auto-close:*] Specifies the zone, when clicked, which will close the menu inside | outside | false true
[--strategy:*] Sets the position to absolute instead of fixed, and removes the transform styles to position the menu relative to the relative parent block. fixed | absolute fixed
[--trigger:*] Event to trigger a dropdown hover | click click

Classes

Name Description
hs-dropdown Dropdown container
hs-dropdown-open Dropdown open
hs-dropdown-toggle Dropdown toggle
hs-dropdown-active The modifier that allows you to set tailwind classes when the dropdown menu is open

Methods

The HSDropdown object is contained within the global window object

Method Description
HSDropdown.open($dropdownEl) Open dorpdown menu
HSDropdown.close($dropdownEl) Close dropdown menu
HSDropdown.toggle($dropdownEl) Toggle dropdown menu

Events

Method Description
open.hs.dropdown Called when any dropdown menu is opened.
close.hs.dropdown Called when any dropdown menu is closed.

Open any dropdown menu event example.

                      
                        window.addEventListener('open.hs.dropdown', ($dropdownEl) => {...})

                        // OR

                        HSDropdown.on('open', ($dropdownEl) => {...})

Open specific dropdown menu event example.

                      
                        $dropdownEl.addEventListener('open.hs.dropdown', (evt) => {...})

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Image Description
Check out Preline UI Mega Menu