Navigation

Navigation patterns for breadcrumbs, pagination, and wayfinding. Built on semantic lists with proper ARIA attributes.

Breadcrumbs

Show the user's location in the site hierarchy.

<nav class="breadcrumbs">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/section/">Section</a></li>
    <li>Current Page</li>
  </ol>
</nav>

Pagination

Navigate through multi-page content.

Code

<!-- Numbered pagination -->
<nav class="pagination" aria-label="pagination">
  <ol>
    <li><a href="#">&laquo;</a></li>
    <li class="current"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
  </ol>
</nav>

<!-- Previous/Next -->
<nav class="pagination" aria-label="pagination">
  <ul>
    <li><a href="#">&laquo; Previous</a></li>
    <li><a href="#">Next &raquo;</a></li>
  </ul>
</nav>