Navigation Elements: Nav Bar

Complete with dropdown menus, courtesy of Superfish. Arrows are automatically added to those elements that contain children. On smaller screens, the nav bar is converted to a select menu via the ReSmenu plugin. 


<nav class="nav nav--bar js-nav--bar" role="navigation" aria-label="Navigation Bar">
    
    <ul class="nav__list nav-ul-0">
        <li class="nav-level-0 nav__list--parent nav__list--here">
            <a href="http://www.firespring.com/">Nav Item 1</a>
            <ul class="nav-ul-1">
                <li class="nav-level-1">
                    <a href="http://www.firespring.com/">Nav Item 1-1</a>
                </li>
                <li class="nav-level-1 nav__list--parent nav__list--here">
                    <a href="http://www.firespring.com/">Nav Item 1-2</a>
                    <ul class="nav-ul-2">
                        <li class="nav-level-2 nav__list--here"><a href="http://www.firespring.com/">Nav Item 1-2-1</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-2-2 is really, really long and keeps on going</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-2-3</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-2-4</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-2-5</a></li>
                    </ul>
                </li>
                <li class="nav-level-1 nav__list--parent">
                    <a href="http://www.firespring.com/">Nav Item 1-3</a>
                    <ul class="nav-ul-2">
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-3-1</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-3-2</a></li>
                        <li class="nav-level-2 nav__list--parent">
                            <a href="http://www.firespring.com/">Nav Item 1-3-3</a>
                            <ul class="nav-ul-3">
                                <li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-1</a></li>
                                <li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-2</a></li>
                                <li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-3</a></li>
                                <li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-4</a></li>
                                <li class="nav-level-3"><a href="http://www.firespring.com/">Nav Item 1-3-3-5</a></li>
                            </ul>
                        </li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-3-4</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-3-5</a></li>
                    </ul>
                </li>
                <li class="nav-level-1 nav__list--parent">
                    <a href="http://www.firespring.com/">Nav Item 1-4</a>
                    <ul class="nav-ul-2">
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-1</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-2</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-3</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-4</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 1-4-5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="nav-level-0">
            <a href="http://www.firespring.com/">Nav Item 2</a>
        </li>
        <li class="nav-level-0 nav__list--parent">
            <a href="http://www.firespring.com/">Nav Item 3</a>
            <ul class="nav-ul-1">
                <li class="nav-level-1 nav__list--parent">
                    <a href="http://www.firespring.com/">Nav Item 3-1</a>
                    <ul class="nav-ul-2">
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-1</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-2</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-3</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-4</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-1-5</a></li>
                    </ul>
                </li>
            
                [...]            
            
                <li class="nav-level-1 nav__list--parent">
                    <a href="http://www.firespring.com/">Nav Item 3-5</a>
                    <ul class="nav-ul-2">
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-1</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-2</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-3</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-4</a></li>
                        <li class="nav-level-2"><a href="http://www.firespring.com/">Nav Item 3-5-5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="nav-level-0">
            <a href="http://www.firespring.com/">Nav Item 4</a>
        </li>    
    </ul>
    
</nav>