Skip to main content

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 #


<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 fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M15 7H4.156l4.107-4.854L6.737.854.69 8l6.047 7.146 1.526-1.292L4.156 9H15V7Z"></path></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 fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M1 7h10.844L7.737 2.146 9.263.854 15.31 8l-6.047 7.146-1.526-1.292L11.844 9H1V7Z"></path></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