Navigation

A menu displays grouped navigation actions.

Example # Mobile

HTML
<nav class="bs-mobile-multilevel-menu" data-behavior-is="mobilemenu-nav">
    <button class="bs-nav-trigger hamburger hamburger--spin">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div class="bs-nav">
        <div class="bs-nav__wrapper">
            <ul class="bs-nav__main">
                <li class="has-subnav">
                    <a href="#">Mobile nav 1 <button></button></a>                   
                    <ul class="bs-nav__sub">
                        <li class="has-subnav">
                            <a href="#">Mobile nav 1-level 1<button></button></a>
                            <ul class="bs-nav__sub">
                                <li><a href="#">Mobile nav 1-level 2</a></li>
                                <li><a href="#">Mobile nav 1-level 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Mobile nav 1-level 1</a></li>
                        <li><a href="#">Mobile nav 1-level 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Mobile nav 2</a></li>
                <li><a href="#">Mobile nav 3</a></li>
                <li><a href="#">Mobile nav 4</a></li>
                <li class="has-subnav">
                    <a href="#">Mobile nav 5 <button></button></a>
                    <ul class="bs-nav__sub">
                        <li class="has-subnav">
                            <a href="#">Mobile nav 5-level 1<button></button></a>
                            <ul class="bs-nav__sub">
                                <li><a href="#">Mobile nav 5-level 2</a></li>
                                <li><a href="#">Mobile nav 5-level 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Mobile nav 5-level 1</a></li>
                        <li><a href="#">Mobile nav 5-level 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Mobile nav 6</a></li>
                <li><a href="#">Mobile nav 7</a></li>
                <li><a href="#">Mobile nav 8</a></li>
            </ul>
        </div>
    </div>
</nav>