City of Tampa Style Guide

Section Navigation 2.10

Toggle example guides Toggle HTML markup

The primary section navigation menu which is a list of links related to the current section.

When to use: Connect all pages with a hierarchical menu.

When not to: When you wan to link to files or external sites, consider in-page buttons.

Notes:

<insert-markup>components.sidenav-</insert-markup> 
<nav class="nav side-nav flex-column">
    <a class="nav-link" href="#">Home</a>
    <a class="nav-link active" href="#">Active Link</a>
    <a class="nav-link" href="#">Contact Us</a>
    <div class="nav-item expanded active-trail">
        <a href="/node/31" class="nav-link expanded active">Columns Test</a>
        <ul class="menu">
            <li class="nav-item expanded active-trail">
                <a href="/node/21" class="nav-link expanded active">Quote, Slideshow, Steps</a>
                <ul class="menu">
                    <li class="nav-item active-trail">
                        <a href="/node/26" class="nav-link active is-active">Table, Video &amp; Views</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <a class="nav-link" href="#">How Do I</a>
</nav>
Source: src/scss/base/_nav.scss, line 52