Breadcrumbs

<nav class="breadcrumbs">
  <ul>
    <li><a href="/styleguide/3">A</a></li>
    <li><a href="/styleguide/3">B</a></li>
    <li><a href="/styleguide/3">C</a></li>
    <li><a href="/styleguide/3">D</a></li>
  </ul>
</nav>

3.3

visual-styles.scss

This navigation is used through the application to navigate from sibling to sibling within structured content

Note: The PhantomJS screenshots will look awkward until we've upgraded to 2.0.

Variants

.selected - Highlights the current sibling
.assessment - Highlights a sibling if it is flagged as an assessment in the data

<nav class="sibling-nav">
  <a class="" href="#"><span>Lesson 1</span></a>
  <a class="selected" href="#"><span>Lesson 2</span></a>
  <a class="assessment" href="#"><span>Lesson 3</span></a>
  <a class="selected assessment" href="#"><span>Lesson 4</span></a>
</nav>

3.4

secondary-nav.scss

This is the navigation used on the Index page for Curricula, and Standards

3

Navigational Elements

Section

3.2

3.3

Sibling Navigation

Variants

3.4

Secondary Navigation

My Standards

All Standards