Previous and next pager

How to use it

Use at the end of an article in a reading sequence, such as a tutorial series or documentation chapters, to move to the neighbouring page. For numbered result pages use the pagination component instead. Replace the hrefs and titles; on the first or last page, remove the missing link rather than leaving it empty.

Accessibility

A <nav aria-label="Article navigation"> holds two ordinary links marked rel="prev" and rel="next"; each link's accessible name includes both the direction word and the destination title, so it makes sense out of context in a links list. The arrows are decorative text hidden with aria-hidden. Direction words are #475569 on #ffffff (7.58:1), titles #1d4ed8 on #ffffff (6.70:1), and while hovered #475569 and #1d4ed8 on #f8fafc (7.24:1 and 6.41:1); each card-sized link shows a 2px focus outline.

Source (copy-ready)

Copy code

<nav class="dcl-prev-next-pager" aria-label="Article navigation">
  <a class="dcl-prev-next-pager__link dcl-prev-next-pager__link--prev" href="../index.html" rel="prev">
    <span class="dcl-prev-next-pager__dir"><span aria-hidden="true">&larr; </span>Previous</span>
    <span class="dcl-prev-next-pager__title">Setting up your workspace</span>
  </a>
  <a class="dcl-prev-next-pager__link dcl-prev-next-pager__link--next" href="../about.html" rel="next">
    <span class="dcl-prev-next-pager__dir">Next<span aria-hidden="true"> &rarr;</span></span>
    <span class="dcl-prev-next-pager__title">Writing your first test</span>
  </a>
</nav>
<style>
.dcl-prev-next-pager { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 40rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-prev-next-pager__link { display: flex; flex: 1 1 14rem; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.75rem 1rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; text-decoration: none; color: #1d4ed8; background-color: #ffffff; }
.dcl-prev-next-pager__link:hover { border-color: #1d4ed8; color: #1d4ed8; background-color: #f8fafc; }
.dcl-prev-next-pager__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-prev-next-pager__link--next { text-align: right; }
.dcl-prev-next-pager__dir { font-size: 0.875rem; color: #475569; }
.dcl-prev-next-pager__title { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; color: #1d4ed8; }
</style>