Navigation

Go from here to there.

  1. Basic Navigation
  2. Off-Screen Navigation
  3. Default Footer
  4. Breadcrumb Navigation
  5. Menu Navigation

Basic Navigation

This navigation is what you see on this page. On a small screen it stacks, and on a larger screen, the nav items float to the right of the logo. This will work for simpler sites that have up to 3 or 4 nav items.

<header class="site-header">
  <div class="container">
    <a class="site-header-logo no-underline-hover" href="/basecoat/">
      <span class="mega-octicon octicon-mark-github"></span>
      Site Name
    </a>
    <nav class="site-header-nav">
      <a class="site-header-nav-item" href="">Link 1</a>
      <a class="site-header-nav-item" href="">Link 2</a>
      <a class="site-header-nav-item" href="">Link 3</a>
    </nav>
  </div>
</header>
<footer class="footer text-muted">
  <div class="container">
    <span class="footer-legal">&copy; 2015 GitHub Inc. All rights reserved.</span>
    <span class="mega-octicon octicon-mark-github footer-mark"></span>
    <nav class="footer-nav">
      <a class="footer-nav-item" href="https://help.github.com/articles/github-terms-of-service">Terms of service</a>
      <a class="footer-nav-item" href="https://github.com/site/privacy">Privacy</a>
      <a class="footer-nav-item" href="https://github.com/security">Security</a>
      <a class="footer-nav-item" href="https://github.com/support">Support</a>
    </nav>
  </div>
</footer>

The breadcrumb navigation shows where you are in a site’s hierarchy. The links in this pattern can be updated with the utility class .link-muted if you would like them to be dark gray instead of blue.

  1. Home
  2. GitHub
  3. Setting up and managing organization and teams
  4. Setting up teams
<ol class="breadcrumb py-4 text-small">
  <li><a href="">Home</a></li>
  <li><a href="">GitHub</a></li>
  <li><a href="">Setting up and managing organization and teams</a></li>
  <li class="breadcrumb-selected">Setting up teams</li>
</ol>

The menu nav, based on Primer’s menu is an updated version of this design pattern. It typically lives on the left or right side of page and is used to show long lists of pages that exist in a group (like documentation).

<nav class="menu" role="navigation" aria-label="Nav title">
  <a class="menu-item" href="#">Menu item</a>
  <a class="menu-item" href="#">Menu item</a>
  <a class="menu-item selected" href="#">Menu item selected</a>
</nav>