Navigation

Navigation generally starts with an “h3” (the name of the section).

This will be positioned next to the “GOOD” logo in the header, if the navigation immediately follows the header.

<nav>
  <h3>News</h3>
  <ul>
    <li><a>Blog</a></li>
    <li><a href="…">Reports</a></li>
    <li><a href="…">Press</a></li>
  </ul>
</nav>

An “h1” can be used instead, if the name of the section is the same as the current page.

<nav>
  <h1>About</h1>
  <ul>
    <li><a>About</a></li>
    <li><a href="…">Philsophy</a></li>
    <li><a href="…">History</a></li>
  </ul>
</nav>

The navigation might also contain a description for the current section.

<nav>
  <h1>About</h1>
  <p><span>Since 2006, GOOD has helped millions of people live well and do good.</span></p>
  <ul>
    <li><a>About</a></li>
    <li><a href="…">Philsophy</a></li>
    <li><a href="…">History</a></li>
  </ul>
</nav>

The “projects” navigation has a special class name, because it’s especially long and needs to be in a vertical layout at most screen sizes.

<nav class="projects">
  <h3>Projects</h3>
  <ul>
    <li><a>All</a></li>
    <li><a href="…">Insights + Strategy</a></li>
    <li><a href="…">Programs + Campaigns</a></li>
    <li><a href="…">Storytelling + Branding</a></li>
    <li><a href="…">Reach + Engagement</a></li>
  </ul>
</nav>