Vanilla JS Responsive Mega Menu with Mobile Sidebar - x-mega-menu

Author4xmen

Last UpdateSeptember 21, 2026

LicenseMIT

Features

Multi-level navigation based on nested HTML lists.
Multi-column mega panels for desktop navigation.
Slide-out drill-down navigation on smaller screens.
Configurable responsive breakpoint.
Click or delayed-hover behavior for deeper desktop levels.
RTL positioning for nested navigation controls.
Fixed-top mode and optional page blur.
Custom mobile toggle markup and side-menu title.
Default red styling plus blue, gray, and dark theme builds.
Callbacks for responsive menu open and close actions.

How To Use It

Installation

Load the stylesheet and JavaScript from a CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/x-mega-menu/dist/x-mega-menu.min.css"
>
<script src="https://cdn.jsdelivr.net/npm/x-mega-menu/dist/x-mega-menu.min.js"></script>

The package is also available through npm and Yarn:

npm install x-mega-menu

yarn add x-mega-menu

Then import the stylesheet and JavaScript:

import 'x-mega-menu/dist/x-mega-menu.css';
import xMegaMenu from 'x-mega-menu/dist/x-mega-menu';

Basic Usage

Create the navigation with nested unordered lists. The first nested level forms the desktop mega panel, and additional nested lists create deeper menu levels.

<nav>
  <ul id="mega-menu">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/products">Products</a>
      <ul>
        <li>
          <h3>Collections</h3>
          <ul>
            <li><a href="/products/new">New Arrivals</a></li>
            <li><a href="/products/popular">Popular Products</a></li>
            <li><a href="/products/sale">Sale</a></li>
          </ul>
        </li>
        <li>
          <h3>Resources</h3>
          <ul>
            <li><a href="/guides">Guides</a></li>
            <li>
              <a href="/docs">Documentation</a>
              <ul>
                <li><a href="/docs/setup">Setup</a></li>
                <li><a href="/docs/configuration">Configuration</a></li>
                <li><a href="/docs/api">API</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="x-highlight">
          <h3>Featured</h3>
          <p>Place promotional or highlighted navigation content here.</p>
        </li>
      </ul>
    </li>
    <li>
      <a href="/contact">Contact</a>
    </li>
  </ul>
</nav>

Initialize the menu with the selector for the root list:

xMegaMenu('#mega-menu', {
  responseWidth: 900,
  mainTitle: 'Site Navigation'
});

Initialization API

xMegaMenu(selector, options);

selector (string): CSS selector for the root menu element. The library initializes the first matching element.
options (object, optional): Configuration object for responsive behavior, menu appearance, and callbacks.

Control Deeper Desktop Menus

disableLinks controls the behavior of desktop items that contain another nested menu.

With the default true value, clicking a deeper menu item opens its child panel and cancels navigation for that click.

xMegaMenu('#mega-menu', {
  disableLinks: true
});

Set it to false to keep the link active. Deeper panels can then open after a one-second hover delay.

xMegaMenu('#mega-menu', {
  disableLinks: false
});

Enable RTL Navigation

Set isRtl to true to move nested submenu controls to the RTL side:

xMegaMenu('#mega-menu', {
  isRtl: true
});

Create A Fixed Mega Menu

fixedTop fixes the main navigation to the top of the viewport and keeps the desktop mega panel beneath it.

xMegaMenu('#mega-menu', {
  fixedTop: true
});

Blur Page Content When The Menu Opens

Enable blurEffect to apply the library’s blur style to surrounding page content while an active menu is open.

xMegaMenu('#mega-menu', {
  blurEffect: true
});

Configuration Options

responseWidth (number, default 1024): Switches to responsive mode when the viewport width falls below this value.
barsIcon (string, default built-in hamburger image markup): Sets the HTML inserted into the responsive menu toggle.
mainTitle (string, default "Navbar menu"): Sets the heading displayed in the mobile side menu.
isRtl (boolean, default false): Moves nested submenu controls to their RTL positions.
blurEffect (boolean, default false): Applies the library’s blur style to surrounding content while the menu is active.
resetMenu (boolean, default true): Removes generated mobile submenu panels when the close routine resets the menu. In version 1.4.1, this reset runs only when blurEffect is true.
disableLinks (boolean, default true): Cancels navigation when deeper desktop items are clicked and opens their child panels. Set it to false to retain link navigation and delayed-hover behavior.
fixedTop (boolean, default false): Fixes the main menu to the top of the viewport.

Callbacks

xMegaMenu('#mega-menu', {
  onOpenSideMenu: function () {
    console.log('Menu opened');
  },
  onCloseSideMenu: function () {
    console.log('Menu closed');
  }
});

onOpenSideMenu (function, default no-op): Runs when the responsive toggle opens the side menu.
onCloseSideMenu (function, default no-op): Runs whenever the side-menu close routine executes. This includes the close button, backdrop clicks, and switching to desktop mode. At desktop widths, it can also run during initialization.

Markup Classes

x-highlight: Marks highlighted content inside a mega-menu column. Highlighted entries are removed from generated deeper mobile panels.
x-always-show: Keeps a top-level item visible when responsive mode hides normal desktop items.
x-small: Uses a narrower grid column for a top-level menu item.

Themes And Styling

The standard stylesheet uses the default red color configuration. Additional blue, gray, and dark builds are available in the package’s dist/theme directory.

x-mega-menu-blue.min.css
x-mega-menu-gray.min.css
x-mega-menu-dark.min.css

For example, load the dark build in place of the standard stylesheet:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/x-mega-menu/dist/theme/x-mega-menu-dark.min.css"
>

For a custom compiled theme, the SCSS source defines these variables. Change them before compiling the stylesheet.

$main-color: Primary navigation accent color.
$invert-text-color: Text color used against the accent.
$second-color: Secondary theme color.
$sub-menu-color: Desktop submenu text color.
$main-menu-bg: Main navigation background.
$is-dark: Switch used by the SCSS source for dark-theme rules.

Vanilla JS Responsive Mega Menu with Mobile Sidebar – x-mega-menu