Demo for Multi-level stack navigation (jQuery mlStackNav)

Customizable, accessible, easy-to-use multi-level stack navigation menu.

Documentation

https://github.com/damianwajer/ml-stack-nav

Usage example

Navigation toggle button

<button type="button" class="ml-stack-nav-toggle" aria-controls="ml-stack-nav-1" title="Toggle the navigation">
    <span class="ml-stack-nav-toggle__line"></span>
    <span class="ml-stack-nav-toggle__line"></span>
    <span class="ml-stack-nav-toggle__line"></span>
</button>

…or a link for basic no-js support (see more in the documentation):

<a href="#ml-stack-nav-1" class="ml-stack-nav-toggle" aria-controls="ml-stack-nav-1" title="Toggle the navigation">(…)</a>

Multi-level navigation menu

<nav id="ml-stack-nav-1" class="ml-stack-nav js-ml-stack-nav" aria-expanded="false">
    <ul class="ml-stack-nav__menu">
        <li class="ml-stack-nav__item">
            <div class="ml-stack-nav__item-inner">
                <a href="" class="ml-stack-nav__link">
                    Item 1
                </a>
                <button class="ml-stack-nav__next js-ml-stack-nav-next" type="button" title="Go to the next level">→</button>
            </div>

            <ul class="ml-stack-nav__menu">
                <li class="ml-stack-nav__item">
                    <button class="ml-stack-nav__back js-ml-stack-nav-back" type="button" title="Go to the previous level">← Back</button>
                </li>
                <li class="ml-stack-nav__item">
                    <div class="ml-stack-nav__item-inner">
                        <a href="" class="ml-stack-nav__link">
                            Item 1 level 2
                        </a>
                        <button class="ml-stack-nav__next js-ml-stack-nav-next" type="button" title="Go to the next level">→</button>
                    </div>

                    <ul class="ml-stack-nav__menu">
                        <li class="ml-stack-nav__item">
                            <button class="ml-stack-nav__back js-ml-stack-nav-back" type="button" title="Go to the previous level">← Back</button>
                        </li>
                        <li class="ml-stack-nav__item">
                            <a href="" class="ml-stack-nav__link">
                                Item 1 level 3
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="ml-stack-nav__item">
                    <a href="" class="ml-stack-nav__link">
                        Item 2
                    </a>
                </li>
            </ul>
        </li>
        <li class="ml-stack-nav__item">
            <a href="" class="ml-stack-nav__link">
                Item 2
            </a>
        </li>
    </ul>
</nav>

Plugin initialization

<script>
    $(".js-ml-stack-nav").mlStackNav();
</script>