---
title: Channel Site Top Navigation
description: Styles and standards for a universal 'channel site' navigation.  
sass: ./scss/_nav.scss
---

## How to Use
The current channel sites that use this type of navigation are:
* [About JSTOR](https://about.jstor.org/)
* [For Librarians](http://www.jstor.org/librarians/)
* [For Publishers](https://about.jstor.org/publishers/)
* [Support](https://support.jstor.org/hc/en-us)

The Channel Site Top 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 the JSTOR logo. 

```html_example 
<nav class="channel-site-nav">
    <div class="top-bar ptxs">
        <div class="top-bar-title">
            <a href="/" id="menu-jstor-logo">
                <img src="/images/logo.png" class="non-responsive" alt="JSTOR Home" width="65" height="90">
            </a>
        </div>

        <div class="nav-main">
            <div class="top-bar-row"> 
                <div class="show-for-medium hide-for-small">UTILITY NAVIGATION</div>
                <div class="show-for-small hide-for-medium">UTILITY NAV</div>
            </div>
            
            <div class="top-bar-row very-light-gray-background">
                <div class="show-for-medium hide-for-small">PRIMARY NAVIGATION</div>
                <div class="show-for-small hide-for-medium">PRIMARY NAV</div>
            </div>
        </div>
    </div>
</nav>
```

<br />

## Utility Nav 

The _utility nav component_ located above the primary navigation lists all the channel sites domains
* [About JSTOR](https://about.jstor.org/)
* [For Librarians](http://www.jstor.org/librarians/)
* [For Publishers](https://about.jstor.org/publishers/)
* [Support](https://support.jstor.org/hc/en-us)


The active site includes styling as a location indicator to show the visitor what site they are currently on.
```html_example 
<nav class="channel-site-nav">
    <div class="top-bar-row">
        <div data-qa="top-bar-left">
            <a href="#" class="plm no-underline">JSTOR.org</a>
        </div>
        <div data-qa="top-bar-right" class="show-for-medium">
            <ul class="menu">
                <li><a href="#" class="bold black-color">About</a></li>
                <li><a href="#">For Librarians</a></li>
                <li><a href="#">For Publishers</a></li>
                <li><a href="#">Support</a></li>
            </ul>
        </div>
    </div>
</nav>
```

<br />

## Primary Nav

The _primary nav component_, located beneath the utility nav component, displays the top level of pages of the current site.  The For Librarians site includes account access to the right.

```html_example 
<nav class="channel-site-nav">
    <div class="top-bar-row very-light-gray-background">
        <div data-qa="top-bar-left">
            <ul class="dropdown menu show-for-medium hide-for-small" role="menubar"> 
                <li class="menu-item active"><a href="#">CHANNEL_SITE Module 1</a></li>
                <li class="is-dropdown-submenu-parent">
                    <a href="#">CHANNEL_SITE Module 2</a>
                    <ul class="menu vertical" role="menu">
                        <li><a href="#">Module 2 - Page 1</a></li>
                        <li><a href="#">Module 2 - Page 2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div data-qa="top-bar-right">
            <ul class="dropdown menu" role="menubar">
                <li class="menu-item show-for-medium">
                    <a href="#">Admin</a>
                </li>
                <li class="menu-item show-for-small hide-for-medium">
                    <button type="button" class="button secondary">Menu</button>
                </li>
            </ul>
        </div>
    </div>
</nav>
```

<br />

## Spacing

1. By default, `nav` will have a `$bonsai-top-bar-bottom-margin: $bonsai-spacing-base * 8 !default;` that creates space between the `nav` and content on the page.
2. If the spacing needs to be removed, add the CSS class `negate-nav-bottom-margin` to the `div` containing the content. The class uses `margin-top: -$bonsai-top-bar-bottom-margin;` when the value of `$bonsai-top-bar-bottom-margin` changes, it will automatically update.

For example, the homepage does not need spacing, the CSS class `negate-nav-bottom-margin` is added to the top-level `div`:
<br />

Before:
```html_example
    <div class="mainInner home">
        <div class="homeMain">
            <div id="hero">
```
After:
```html_example
    <div class="mainInner home negate-nav-bottom-margin">
        <div class="homeMain">
            <div id="hero">
```

<br />

## Responsive/Mobile Off-Canvas Menu

[dropdown-menus](/styleguide/dropdownmenu.html) are useful and usable for large screens, this type of navigation does not work well on mobile devices or smaller view ports. see [Base Patterns for Mobile Navigation](https://www.nngroup.com/articles/mobile-navigation-patterns/).
  

### Organization

- The display of these alternate views (exemplified above and below) is handled by [foundation's visibility docs](http://foundation.zurb.com/sites/docs/visibility.html) 
  (e.g. `.show-for-medium`, `.hide-for-small`).
  
- The `off-canvas` section specifies both the navigation that slides in and the content it displaces, contained within an `.off-canvas-wrapper`.
  
For more information on the off-canvas and how it works see the [foundation docs](http://foundation.zurb.com/sites/docs/off-canvas.html).  
For details on accessibility and guidelines review [off-canvas entry](/styleguide/off-canvas.html) in this styleguide.
   

### Content

The mobile menu uses the elements from the primary nav, and most of those in the utility nav,
  then places them vertically in the same display, separated by `<hr />`s.

```html_example
<button type="button" class="button" data-toggle="nav-content">Show Menu</button>
<div id="nav-content" class="off-canvas-absolute position-right" data-off-canvas>
    <div class="pll ptm">
    
        <!-- Close button -->
        <button class="close-button" data-close aria-label="close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
            
        <!-- Primary Nav items -->
        <ul class="no-bullet">
            <li class="pbs"><a href="#" class="small-heading">Site Home</a></li>
            <li class="pbs"><a href="#" class="small-heading">Module 1</a></li>
            <li>
                <h2 class="small-heading mbs">Module 2</h2>
                <ul class="no-bullet">
                    <li class="plm pbs"><a href="#" class="bold">Module 2 - Page 1</a></li>
                    <li class="plm pbs"><a href="#" class="bold">Module 2 - Page 2</a></li>
                </ul>
            </li>
        </ul>
        
        <hr />
        
        <!-- Admin link/s -->
        <ul class="no-bullet">
            <li><a href="#" class="small-heading">Admin</a></li>
        </ul>
        
        <hr />
        
        <!-- Utility nav Support site links -->
        <ul class="no-bullet">
            <li class="pbs"><a href="#" class="small-heading">SITE_ONE</a></li>
            <li class="pbs"><a href="#" class="small-heading">SITE_TWO</a></li>
            <li class="pbs"><a href="#" class="small-heading">SITE_THREE</a></li>
            <li class="pbs"><a href="#" class="small-heading">SITE_FOUR</a></li>
        </ul>
    </div>
</div>
```

_note: the `.close-button` in the top right has been omitted in this snippet, but can be shown below in the
  complete example below_

## Example

Below is a fully-fleshed out channel site nav example, complete with mobile behavior. 

Be sure to adjust the screen width to see the nav change dynamically between mobile and non-mobile with the screen size!

```html_example 
<!-- Skip to Main Content link for accessibility -->
<a class="visuallyhidden" href="#content">Skip to Main Content</a>

<!-- General Nav with mobile skeleton -->
<nav class="channel-site-nav">
    <div class="top-bar ptxs">
    
        <!-- Nav Title with JSTOR Logo -->
        <div class="top-bar-title">
            <a href="#" id="menu-jstor-logo">
                <img src="/images/logo.png" class="non-responsive" alt="JSTOR Home" width="65" height="90">
            </a>
        </div>

        <div class="nav-main">
        
            <!-- Utility Nav -->
            <div class="top-bar-row">
                <div data-qa="top-bar-left">
                    <a href="#" class="plm no-underline">JSTOR.org</a>
                </div>
                <div data-qa="top-bar-right" class="show-for-large">
                    <ul class="menu">
                        <li class="menu-item"><a href="#" class="bold black-color">SITE_ONE</a></li>
                        <li class="menu-item"><a href="#">SITE_TWO</a></li>
                        <li class="menu-item"><a href="#">SITE_THREE</a></li>
                        <li class="menu-item"><a href="#">SITE_FOUR</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- Primary Nav -->
            <div class="top-bar-row very-light-gray-background">
                <div data-qa="top-bar-left">
                    <div class="show-for-medium hide-for-small">
                        <ul class="dropdown menu" role="menubar"> 
                            <li class="menu-item active"><a href="#">CHANNEL_SITE Module 1</a></li>
                            <li class="is-dropdown-submenu-parent">
                                <a href="#">CHANNEL_SITE Module 2</a>
                                <ul class="menu vertical" role="menu">
                                    <li><a href="#">Module 2 - Page 1</a></li>
                                    <li><a href="#">Module 2 - Page 2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div data-qa="top-bar-right">
                    <ul class="dropdown menu" role="menubar">
                        <li class="menu-item show-for-medium">
                            <a href="#">Admin</a>
                        </li>
                        <li class="menu-item show-for-small hide-for-medium">
                            <button type="button" class="button secondary" data-toggle="nav-responsive">Menu</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>

<div class="off-canvas-wrapper">

    <!-- Mobile Nav - Off-Canvas Content -->
    <div class="off-canvas-absolute position-right" id="nav-responsive" data-off-canvas>
        <div class="pll ptm">
            <button class="close-button" data-close aria-label="close" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
            <ul class="no-bullet">
                <li class="pbs"><a href="#" class="small-heading no-underline">Site Home</a></li>
                <li class="pbs"><a href="#" class="small-heading no-underline">Module 1</a></li>
                <li>
                    <h2 class="small-heading mbs">Module 2</h2>
                    <ul class="no-bullet">
                        <li class="plm pbs"><a href="#" class="bold no-underline">Module 2 - Page 1</a></li>
                        <li class="plm pbs"><a href="#" class="bold no-underline">Module 2 - Page 2</a></li>
                    </ul>
                </li>
            </ul>
            <hr />
            <ul class="no-bullet">
                <li><a href="#" class="small-heading no-underline">Admin</a></li>
            </ul>
            <hr />
            <ul class="no-bullet">
                <li class="pbs"><a href="#" class="small-heading no-underline">SITE_ONE</a></li>
                <li class="pbs"><a href="#" class="small-heading no-underline">SITE_TWO</a></li>
                <li class="pbs"><a href="#" class="small-heading no-underline">SITE_THREE</a></li>
                <li class="pbs"><a href="#" class="small-heading no-underline">SITE_FOUR</a></li>
            </ul>
        </div>
    </div>
    
    <!-- General content of the rest of the page -->
    <div id="content" class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content>
        <p>I'm whatever main content of the site the topbar is sitting on top of.</p>
    </div>
</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 [dropdown menu](dropdownmenu.html) 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.