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" fill="currentColor" 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"/></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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></svg>
    </span>
  </a>
</nav>

Elements #

Element	Description	Usage	Required	Multiple
Previous item	Link to the previous item in the series	Exclude if the current item is the first in the series	Previous item is optional	Component may contain only one Previous item
Next item	Link to the next item in the series	Exclude if the current item is the last in the series	Next item is optional	Component may contain only one Next item
Label	Label that appears above the name of the linked item	Do not use text other than "Previous" or "Next"	Label is required	Component may contain only one Label
Item name	Name of the linked item	Limit to a few words	Item name is required	Component may contain only one Item name
Icon	Left or right chevron that appears in the link	Do not change the default chevron icons	Icon is required	Component may contain only one Icon

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

Don't

Use more than one series nav per page
Use anywhere other than the bottom of the main content area