Navigation

Primary with Advanced Dropdown

See above

The main navigation has quite a bit of content. Utilize the hide-on-mobile class for content that should only display on desktop.

<nav id="nav" class="main__navigation main-navigation nav-primary" role="navigation">
    <ul>
        <li class="has__dropdown"><a href="">Leisure <i class="icon-chevron-down"></i><span>Explore, Play + Events</span></a>
            <div class="dropdown">
                <div class="grid-x hide-on-mobile nav__heading">
                    <div class="medium-12 cell">
                        <p class="l-margin-bn">Leisure</p>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="medium-4 cell hide-on-mobile">
                        <p>With its great weather, miles of sandy beaches, and major attractions, San Diego is known worldwide as medium-1 of the best tourist destinations and a great place for residents to relax year round.</p>
                    </div>
                    <div class="medium-4 cell">
                        <div class="grid-x border border--bottom">
                            <div class="medium-6 cell">
                                <a href=""><h4>Parks</h4></a>
                            </div>
                            <div class="medium-6 cell">
                                <ul>
                                    <li><a href="">Community Parks</a></li>
                                    <li><a href="">Recreation Centers</a></li>
                                    <li><a href="">Book an Event</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="medium-4 cell hide-on-mobile">
                        <div class="nav__event">
                            <img src="/images//nav-event-1.jpg" width="74" height="74" alt="Event 1">
                            <p>Celebrate the Balboa Park Centennial <a href="">Learn More</a></p>
                        </div>
                        <div class="nav__event">
                            <img src="/images//nav-event-2.jpg" width="74" height="74" alt="Event 2">
                            <p>Get an Event Permit <a href="">Learn More</a></p>
                        </div>
                        <div class="nav__event">
                            <img src="/images//nav-event-3.jpg" width="74" height="74" alt="Event 3">
                            <p>Book Your Tee Time <a href="">Learn More</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</nav>

The menu-toggle icon displays on smaller viewports to access the off-canvas navigation. This element must be placed directly above the <nav>.

Department Top Navigation

This navigation is meant to be placed above the main content of a department site, directly within a <nav> element.

In mobile view, the navigation tab converts to an accordion.

<div class="hide-on-mobile top-menu">
    <nav>
        <ul class="department-menu">
            <li><a href="">Department Home</a></li>
            <li class="is_active"><a href="">Section 1</a></li>
            <li><a href="">Section 2</a></li>
            <li><a href="">Section 3</a></li>
            <li><a href="">Section 3</a></li>
        </ul>
    </nav>
</div>

<div class="hide-on-desktop sub-navigation-mobile">
    <div class="accordions js-toggle-accordion">
        <div class="accordion">
            <p class="accordion__heading"><a class="accordion__link" href="#"><i class="icon-menu l-margin-rs"></i> Site Menu <span class="toggle-icon"> </span></a></p>
            <div class="accordion__drawer" style="display: none;">
                <ul id="department-top-menu" class="department-menu">
                    <li><a href="">Department Home</a></li>
                    <li class="is_active"><a href="">Section 1</a></li>
                    <li><a href="">Section 2</a></li>
                    <li><a href="">Section 3</a></li>
                    <li><a href="">Section 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Pagination

Tabs

Tab Content 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab Content 2

Tab Content 3

Tab Content 4

The tab group must have a unique ID to ensure multiple tab groups on a single page work correctly. Give the first navigation link and content block is-active to initiate an active content block on page load. Give each tab content block a unique ID, and target the navigation links appropriately.

<div id="tab-group" class="tabs">
    <ul class="tabs-list js-tabs-list">
        <li class="tabs-list__item is-active"><a class="tabs-list__link" href="#tab-item-1">Tab Content 1</a></li>
        <li class="tabs-list__item"><a class="tabs-list__link" href="#tab-item-2">Tab Content 2</a></li>
        <li class="tabs-list__item"><a class="tabs-list__link" href="#tab-item-3">Tab Content 3</a></li>
        <li class="tabs-list__item"><a class="tabs-list__link" href="#tab-item-4">Tab Content 4</a></li>
    </ul>

<div class="tabs-container">
        <div id="tab-item-1" class="tabs__bucket is-active">
            <h3 class="heading--snug">Tab Content 1</h3>
            <div class="l-container">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div id="tab-item-2" class="tabs__bucket">
            <h3 class="heading--snug">Tab Content 2</h3>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div id="tab-item-3" class="tabs__bucket">
            <a id="docs-downloads"></a>
            <h3 class="heading--snug">Tab Content 3</h3>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div id="tab-item-4" class="tabs__bucket">
            <h3 class="heading--snug">Tab Content 4</h3>
            <div class="l-container">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
</div>

Application Header

Simple Header

This header can be used on outreach pages instead of the normal sandiego.gov header.

Portal Header

Business Portal

Portal Sub-Navigation

This navigation uses the modifier class main__navigation--portal.

For external applications, the City Logo must link to the City's public site (sandiego.gov).

For internal apps, the City Logo must link to the employee intranet site (CityNet).

A list of social media icons needs to be given class social-links. To show the social media platform's brand color when you hover over its icon, add class icon--[platform] to the anchor tag.

Refer to the Icon Library for additional social icons.

<div class="footer--left">
                <div class="top">
                    <img src="/images/cosd-logo/cosd-logo-initials-white.svg" alt="The City of San Diego - logo" width="49" height="39">
                    <ul class="social-links">
                        <li><a class="icon--facebook" href=""><i class="icon-facebook"></i></a></li>
                        <li><a class="icon--youtube" href=""><i class="icon-youtube"></i></a></li>
                        <li><a class="icon--twitter" href=""><i class="icon-twitter"></i></a></li>
                    </ul>
                </div>
                <p class="copyright">
                    Copyrighted © 2002-2015<br>
                    City of San Diego. All rights reserved.
                </p>
            </div>
            <nav class="menu--footer">

<ul>
                    <li class="menu-item--expanded">
                        <a href="/" data-drupal-link-system-path="<front>" class="is-active">First Section</a>
                        <ul>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                        </ul>
                    </li>

<li class="menu-item--expanded">
                        <a href="/" data-drupal-link-system-path="<front>" class="is-active">Second Section</a>
                        <ul>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                        </ul>
                    </li>

<li class="menu-item--expanded">
                        <a href="/" data-drupal-link-system-path="<front>" class="is-active">Third Section</a>
                        <ul>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                        </ul>
                    </li>
                </ul>

</nav>
        </div>
    </div>
</footer>

Navigation

Primary with Advanced Dropdown

Department Top Navigation

Department Sidebar Navigation