Foundation 4:
Top Bar

The Foundation Top Bar gives you a great way to display a complex navigation bar on small or large screens.

Here's the sample html that we want Taxonomy to output:

<nav class="top-bar">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Top Site Label </a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section">
        <ul>
            <li class="divider"></li>
            <li class="has-dropdown"><a href="#">Level 1A</a>
                <ul class="dropdown">
                    <li><a href="#">Level 1A A</a></li>
                    <li class="has-dropdown"><a href="#">Level 1A B</a>
                        <ul class="dropdown">
                            <li><a href="#">Level 1A B A</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="divider"></li>
            <li class="has-dropdown"><a href="#">Level 1B</a>
                <ul class="dropdown">
                    <li><a href="#">Level 1B A</a></li>
                    <li><a href="#">Level 1B B</a></li>
                </ul>
            </li>
            <li class="divider"></li>
        </ul>
    </section>
</nav>

Everything within the .top-bar-section is going to be our tree structure, with .has-dropdown applied to any parents with children, .divider's between each list item in the top level, and .dropdown applied to all nested ul elements.