---
title: Global Navigation
description: Styles and standards for a universal site navigation.
sass: ./scss/_global-navigation.scss
js: ./js/bonsai.globalnav.js
---

## How to use

The Global Navigation is dependant on the following components:
1. [Accessible Notification](accessible-notifications.html)
1. [Dropdown Menu](dropdownmenu.html) - styling only

The Global Navigation is comprised of two main `.top-bar-row`s, the __Utility Nav__ on top and the __Primary Nav__
beneath, both of these components are positioned to the right of a `.top-bar-title` section. Both sections have active
states to signify what page the user is currently. The __utility navigation__ reflects the active state as body text
color and bold where the __primary navigation__ uses a colored background as well as a darker bottom indicator bar,
this also includes the active element in the dropdown except the indicator is on the left.

Add the `data-top-bar-nav` attribute to the `<ul>` that wraps the menu items and add `data-subnav` to each of the sub
navigation containers.

```html_example
<nav role="navigation">
    <div class="top-bar">

        <!-- Nav Title with Logo -->
        <div class="top-bar-title pts">
            <a href="#">
                <img src="https://via.placeholder.com/65x90" class="non-responsive" alt="Site Home" />
            </a>
        </div>
        <div class="nav-main">

            <!-- Utility Nav -->
            <div class="top-bar-row align-justify">
                <div>
                    <a href="#" class="plm no-underline">Site.org</a>
                </div>
                <div>
                    <ul class="menu">
                        <li><a href="#" class="bold black-color">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>
                </div>
            </div>

            <!-- Primary Nav -->
            <div class="top-bar-row align-justify">
                <div>
                    <ul class="dropdown menu" data-top-bar-nav role="group">
                        <li class="menu-item active"><a href="#">Main Link 1</a></li>
                        <li>
                            <a href="#">Main Link 2</a>
                            <ul class="menu vertical" data-subnav role="group">
                                <li><a href="#">Sub Link 1</a></li>
                                <li><a href="#">Sub Link 2</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Main Link 3</a>
                            <ul class="menu vertical" data-subnav role="group">
                                <li><a href="#">Sub Link 1</a></li>
                                <li><a href="#">Sub Link 2</a></li>
                                <li><a href="#">Sub Link 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="dropdown menu" data-top-bar-nav role="group">
                        <li class="menu-item"><a href="#">Side Link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- General content of the rest of the page -->
<div id="content" style="min-height: 150px;">
    <p>I'm whatever main content of the site the Global Navigation is apart of.</p>
</div>
```

## Mega Menu

To implement a mega menu, add `data-mega-menu` to the `data-subnav` container along with the `.dropdown-pane` and `.mega-menu`
classes. Split columns of the mega menu into `.firs-sub` and `.second-sub` columns using a grid pattern.

```html_example
<nav role="navigation">
    <div class="top-bar">

        <!-- Nav Title with Logo -->
        <div class="top-bar-title pts">
            <a href="#">
                <img src="https://via.placeholder.com/65x90" class="non-responsive" alt="Site Home" />
            </a>
        </div>
        <div class="nav-main">

            <!-- Utility Nav -->
            <div class="top-bar-row align-justify">
                <div>
                    <a href="#" class="plm no-underline">Site.org</a>
                </div>
                <div>
                    <ul class="menu">
                        <li><a href="#" class="bold black-color">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>
                </div>
            </div>

            <!-- Primary Nav -->
            <div class="top-bar-row align-justify">
                <div>
                    <ul class="dropdown menu" data-top-bar-nav role="group">
                        <li class="menu-item"><a href="#" role="button">Main Link 1</a></li>
                        <li>
                            <a href="#">Main Link 2</a>
                            <ul class="menu vertical" data-subnav role="group">
                                <li><a href="#">Sub Link 1</a></li>
                                <li><a href="#">Sub Link 2</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="active" aria-controls="mega-menu" role="button">Main Link 3</a>
                            <div id="mega-menu" class="dropdown-pane mega-menu" data-mega-menu data-subnav>
                                <div class="row mtm">
                                    <div class="column first-sub">
                                        <ul class="menu" role="group">
                                            <li class="mega-menu-item">
                                                <div class="bold mbn">Mega Section 1</div>
                                                <ul class="menu" role="group">
                                                    <li><a href="#"> Sub Link 1</a></li>
                                                    <li><a href="#">Sub Link 2</a></li>
                                                    <li><a href="#">Sub Link 3</a></li>
                                                    <li><a href="#">Sub Link 4</a></li>
                                                </ul>
                                            </li>
                                            <li class="mega-menu-item">
                                                <div class="bold mtxl mbn">Mega Section 2</div>
                                                <ul class="menu" role="group">
                                                    <li><a href="#">Sub Link 1</a></li>
                                                    <li><a href="#">Sub Link 2</a></li>
                                                    <li><a href="#">Sub Link 3</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="column second-sub">
                                        <ul class="menu mega-menu-item" role="group">
                                            <li>
                                                <a href="#" class="bold">Site Section 1</a>
                                                <em class="ptn">Some description lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
                                            </li>
                                            <li>
                                                <a href="#" class="bold active">Site Section 2</a>
                                                <em class="ptn">Some description aliquam fermentum augue ut lorem mattis, vitae aliquam eros interdum.</em>
                                            </li>
                                            <li>
                                                <a href="#" class="bold">Site Section 3</a>
                                                <em class="ptn">Some description nunc erat sapien, viverra a finibus in, elementum.</em>
                                            </li>
                                            <li>
                                                <a href="#" class="bold">Site Section 4</a>
                                                <em class="ptn">Some description pellentesque dictum, nisi non suscipit bibendum.</em>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#" role="button">Main Link 4</a>
                            <ul class="menu vertical" data-subnav role="group">
                                <li><a href="#">Sub Link 1</a></li>
                                <li><a href="#">Sub Link 2</a></li>
                                <li><a href="#">Sub Link 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="dropdown menu" data-dropdown-menu role="group">
                        <li class="menu-item"><a href="#" role="button">Side Link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- General content of the rest of the page -->
<div id="content" style="min-height: 150px;">
    <p>I'm whatever main content of the site the Global Navigation is apart of.</p>
</div>
```



## Guidelines

1. The primary nav should include top level links within the current site.
1. Links should open in the same tab.
1. If a top level page has sub pages, a dropdown menu will include those pages.
1. Review the  component for sub page navigation.
1. A location indicator should be present to show the visitor what page they are on.
1. The utility navigation should only include the current site and the other channel sites.


## Accessibility

1. 'Skip to Main Content' link available as first tabbed item.
1. The navigation should be accessed and navigable by using the tab key on a keyboard.
1. Screen readers should read the primary navigation first and skip the utility navigation. The pages within the utilty navigation exist in the footer and is where a screen reader user would expect those links.