@ithaka/bonsai

--- 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">  <button class="close-button" data-close aria-label="close" type="button"> <span aria-hidden="true">×</span> </button>  <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 />  <ul class="no-bullet"> <li><a href="#" class="small-heading">Admin</a></li> </ul> <hr />  <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  <a class="visuallyhidden" href="#content">Skip to Main Content</a>  <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 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>  <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">  <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">×</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>  <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.