Navigation

Main Navigation

Main navigation is the primary navigation of the website and should contain links to key top level sections of the site, there should only ever be one per site and should be consitantly placed at the top of each page.

Local Navigation Header

  <nav class="local-nav-header">
    <a href="#">Section</a>
    <a href="#">Section</a>
    <a href="#">Section</a>
  </nav>

Local Navigation Sidebar

Local Navigation is used to quickly jump between pages that fall under the same section of the site.

  <nav class="local-nav-sidebar">
    <div class="local-nav-sidebar__item is-current">
      <a href="#">Nav Link</a>
      <div class="local-nav-sidebar__subitems">
        <a href="#">Sub Item</a>
        <a href="#">Sub Item</a>
        <a href="#" class="is-current">Sub Item</a>
        <a href="#">Sub Item</a>
      </div>
    </div>
    <div class="local-nav-sidebar__item">
      <a href="#">Nav Link</a>
    </div>
    <div class="local-nav-sidebar__item">
      <a href="#">Nav Link</a>
    </div>
    <div class="local-nav-sidebar__item">
      <a href="#">Nav Link</a>
    </div>
  </nav>

Internal Page Navigation

Internal Page Navigation should be used on pages with longer content to provide the user a more efficient way of reaching sections of the content and also provides an overview of the pages content.

  <nav class="internal-page-nav">
    <a href="#">Section</a>
    <a href="#">Section</a>
    <a href="#">Section</a>
  </nav>
  
  <ul class="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="#">
        <span itemprop="name">Link</span>
      </a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="#">
        <span itemprop="name">Link</span>
      </a>
      <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="#">
        <span itemprop="name">Link</span>
      </a>
      <meta itemprop="position" content="3">
    </li>
  </ul>