Series nav

Allow users to step forward or backward through a series of content pages

Overview #

Use the series nav to allow the user to step forward or backward through a series of content pages.

A series nav is often used at the bottom of a news article, blog post, event page, or profile.

Examples #

Choose an example

<nav class="rvt-seriesnav">
  <a class="rvt-seriesnav__previous" href="#">
    <div class="rvt-seriesnav__text">
      <span class="rvt-seriesnav__label">Previous:</span>
      <span class="rvt-seriesnav__item">Norval Ashton</span>
    </div>
    <span class="rvt-seriesnav__icon" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <path fill="currentColor" d="M15,7H3.41L5.71,4.71A1,1,0,0,0,4.29,3.29l-4,4a1,1,0,0,0,0,1.42l4,4a1,1,0,0,0,1.41-1.41L3.41,9H15a1,1,0,1,0,0-2Z" />
      </svg>
    </span>
  </a>
  <a class="rvt-seriesnav__next" href="#">
    <div class="rvt-seriesnav__text">
      <span class="rvt-seriesnav__label">Next:</span>
      <span class="rvt-seriesnav__item">Elta Era</span>
    </div>
    <span class="rvt-seriesnav__icon" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 16 16">
        <path fill="currentColor" d="M15.92,8.38a1,1,0,0,0-.22-1.09l-4-4a1,1,0,0,0-1.41,1.41L12.59,7H1A1,1,0,0,0,1,9H12.59l-2.29,2.29a1,1,0,1,0,1.41,1.41l4-4A1,1,0,0,0,15.92,8.38Z" />
      </svg>
    </span>
  </a>
</nav>

Usage #

Do

Use to offer navigation between a series of related pages like news articles, blog posts, events, or profiles
Use at the bottom of the main content area
Keep title text brief

Don't

Use more than one series nav per page
Use anywhere other than the bottom of the main content area
Use in place of the sidenav as section navigation
Change the left and right arrow icons shown in the code examples