Lifetime updates on every purchase Support replies within 24 hours Secure checkout via Gumroad 8,500+ sales since 2016

Markup

Updated 1 min read 4 views

Any element that contains a nested list. A link (or button) followed by a <ul> becomes a submenu trigger:

<nav class="menu" aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li>
      <a href="/shop">Shop</a>
      <ul>
        <li><a href="/shop/women">Women</a>
          <ul>
            <li><a href="/shop/women/dresses">Dresses</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

LayerMenu adds:

  • BEM classes on the container, every level, item and link (see Styling);
  • a back button as the first item of every submenu (li.vlt-layer-menu__back > button.vlt-layer-menu__back-btn);
  • an optional title item (li.vlt-layer-menu__title, with showTitle: true);
  • a chevron (span.vlt-layer-menu__arrow) inside every trigger;
  • aria-expanded, aria-controls and an id on submenus that have none.

destroy() removes all of it and restores the original markup.

Was this article helpful?