Iain Urquhart

Taxonomy 3

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.

Want to say 'thank you'?

If you find any of my work useful, feel free to make a donation amount of your choosing via PayPal — or if you like, purchase a copy of Introvert from Devot-EE and you'll get something in return :)

↑ Back to top