@ithaka/bonsai
Version:
ITHAKA core styling
222 lines (199 loc) • 10.7 kB
Markdown
---
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.