Syllabus

On this page

Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema

Badar KhalilUpdated September 30, 2026 6 min read

What are pagination and breadcrumbs?

Breadcrumbs show the user's location in a site hierarchy (Home / Courses / CSS / Buttons) and let them jump back to a parent page. Pagination splits long lists, such as search results, blog posts or products, into pages so users can move through them. Both are wayfinding components: they reduce confusion, improve usability and help search engines understand site structure.

Focus keyword: pagination and breadcrumbs. Related trending keywords: accessible pagination, breadcrumb navigation CSS, aria-current page, BreadcrumbList schema, breadcrumb structured data, infinite scroll vs pagination, SEO friendly pagination, responsive pagination.

Breadcrumbs: semantic HTML

Wrap them in <nav aria-label='Breadcrumb'> so screen readers can find the landmark.
Use an ordered list <ol>, because the order is meaningful.
Each ancestor is a link. The current page is the last item, marked with aria-current='page' (it can be plain text or a link).
Do not put the separator characters in the HTML. Add them with CSS ::before so they are not read aloud for every item.

Breadcrumbs: styling

Use display: flex; flex-wrap: wrap; gap: 8px; list-style: none;. For the separator use li + li::before { content: '/'; } or a chevron created with borders, and put it in aria-hidden territory by using CSS content (modern browsers also support alternative text like content: '/' / '' to silence it). Truncate long titles with text-overflow: ellipsis and a max width. On small screens you can show only the parent link, for example Back to Courses.

Add BreadcrumbList schema in JSON-LD so search engines can understand the hierarchy and may show the path in results. Each ListItem has a position, name and item (URL). Keep the structured data consistent with the visible breadcrumbs.

Pagination: semantic HTML

Use <nav aria-label='Pagination'> with a list of links.
Use real links (<a href='?page=2'>) for server-rendered content so pages are shareable, crawlable and work without JavaScript. For client-side updates, use buttons and manage focus and live regions.
Mark the current page with aria-current='page' and style it differently (not by color alone).
Give links clear names: aria-label='Go to page 3', aria-label='Previous page', aria-label='Next page'.
Disabled Previous or Next on the first or last page should use aria-disabled='true' (and no href) or be omitted.

Designing pagination

Show Previous, Next, the first and last page, and a few pages around the current one. Use an ellipsis for gaps, marked as non-interactive.
Make targets at least 44px on touch devices or keep at least 24px with spacing.
On small screens, show a compact form: Previous, Page 3 of 12, Next.
Tell users the total: Showing 21 to 30 of 240 results.
Keep the same order and position after navigation, and move focus to the results heading when content changes via JavaScript.

Pagination, load more or infinite scroll?

Pagination: best for goal-oriented tasks like search results, tables and content that users need to return to, and it keeps the footer reachable.
Load more: a good middle ground for browsing content with an explicit button.
Infinite scroll: only for endless feeds. It harms orientation, keyboard access and footer access unless carefully designed.

SEO notes for pagination

Give each page a unique, crawlable URL and self-referencing canonical link. Avoid hiding pages behind JavaScript only. Search engines no longer use rel='prev' and rel='next' as an indexing signal, but they are harmless, and good internal links between pages still matter.

Quick summary

Use nav landmarks with clear labels, lists, real links and aria-current='page' for both components. Add CSS separators for breadcrumbs, BreadcrumbList schema for SEO, and a compact, well-labeled layout for pagination.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 15px; }
  .crumbs li { display: flex; align-items: center; gap: 8px; }
  .crumbs li + li::before { content: '/' / ''; color: #94a3b8; }
  .crumbs a { color: #4f46e5; text-decoration: none; padding: 4px 2px; border-radius: 4px; }
  .crumbs a:hover { text-decoration: underline; }
  .crumbs a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  .crumbs [aria-current='page'] { color: #0f172a; font-weight: 700; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>
<nav class='crumbs' aria-label='Breadcrumb'>
  <ol>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Courses</a></li>
    <li><a href='#'>CSS</a></li>
    <li><span aria-current='page'>UI Components and Buttons</span></li>
  </ol>
</nav>

Output

Press Run to execute.

Try it Yourself HTML

<nav aria-label='Breadcrumb'>
  <ol>
    <li><a href='/'>Home</a></li>
    <li><a href='/courses'>Courses</a></li>
    <li><a href='/courses/css'>CSS</a></li>
    <li aria-current='page'>Buttons</li>
  </ol>
</nav>

<script type='application/ld+json'>
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Courses", "item": "https://example.com/courses" },
    { "@type": "ListItem", "position": 3, "name": "CSS", "item": "https://example.com/courses/css" },
    { "@type": "ListItem", "position": 4, "name": "Buttons" }
  ]
}
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; }
  .pager ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; align-items: center; }
  .pager a, .pager span.gap { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: #1e293b; border: 1px solid #cbd5e1; background: #fff; font-weight: 600; }
  .pager a:hover { background: #eef2ff; }
  .pager a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  .pager a[aria-current='page'] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
  .pager a[aria-disabled='true'] { opacity: .5; pointer-events: none; }
  .pager span.gap { border: 0; background: none; }
</style>
<nav class='pager' aria-label='Pagination'>
  <ul>
    <li><a aria-disabled='true' aria-label='Previous page'>Prev</a></li>
    <li><a href='?page=1' aria-current='page' aria-label='Page 1, current page'>1</a></li>
    <li><a href='?page=2' aria-label='Go to page 2'>2</a></li>
    <li><a href='?page=3' aria-label='Go to page 3'>3</a></li>
    <li><span class='gap' aria-hidden='true'>...</span></li>
    <li><a href='?page=12' aria-label='Go to page 12'>12</a></li>
    <li><a href='?page=2' aria-label='Next page'>Next</a></li>
  </ul>
</nav>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; max-width: 480px; }
  ul.items { padding-left: 20px; min-height: 140px; }
  .pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pager button { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font: 600 15px system-ui; cursor: pointer; }
  .pager button[aria-current='page'] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
  .pager button:disabled { opacity: .45; cursor: not-allowed; }
  .pager button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
</style>
<h2 id='res' tabindex='-1'>Results</h2>
<p id='status' aria-live='polite'></p>
<ul class='items' id='items'></ul>
<nav class='pager' aria-label='Pagination' id='pager'></nav>
<script>
  var data = []; for (var i = 1; i <= 47; i++) data.push('Item ' + i);
  var perPage = 10, page = 1, total = Math.ceil(data.length / perPage);
  function render() {
    var start = (page - 1) * perPage;
    document.getElementById('items').innerHTML = data.slice(start, start + perPage).map(function (t) { return '<li>' + t + '</li>'; }).join('');
    document.getElementById('status').textContent = 'Showing ' + (start + 1) + ' to ' + Math.min(start + perPage, data.length) + ' of ' + data.length + ' results';
    var nav = document.getElementById('pager'); nav.innerHTML = '';
    function add(label, p, opts) {
      var b = document.createElement('button'); b.type = 'button'; b.textContent = label;
      if (opts && opts.disabled) b.disabled = true;
      if (opts && opts.aria) b.setAttribute('aria-label', opts.aria);
      if (opts && opts.current) b.setAttribute('aria-current', 'page');
      b.addEventListener('click', function () { page = p; render(); document.getElementById('res').focus(); });
      nav.appendChild(b);
    }
    add('Prev', page - 1, { disabled: page === 1, aria: 'Previous page' });
    for (var p = 1; p <= total; p++) add(String(p), p, { current: p === page, aria: 'Go to page ' + p });
    add('Next', page + 1, { disabled: page === total, aria: 'Next page' });
  }
  render();
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; }
  .compact { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 420px; }
  .compact a { display: inline-grid; place-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #4f46e5; color: #fff; text-decoration: none; font-weight: 600; }
  .compact a[aria-disabled='true'] { background: #cbd5e1; color: #64748b; pointer-events: none; }
  .compact a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  .numbers { display: none; }
  @media (min-width: 560px) { .numbers { display: inline; } .current-only { display: none; } }
</style>
<nav class='compact' aria-label='Pagination'>
  <a aria-disabled='true' aria-label='Previous page'>Prev</a>
  <p style='margin:0'><span class='current-only'>Page 1 of 12</span><span class='numbers'>1 2 3 ... 12</span></p>
  <a href='?page=2' aria-label='Next page'>Next</a>
</nav>
<p>A compact mobile pattern: Previous, Page x of y, Next.</p>

Output

Press Run to execute.

Exercise: Style an accessible breadcrumb with CSS separatorsHTML

Use li + li::before to add a chevron or slash separator that is not read by screen readers. Mark the last item with aria-current='page', add a clear focus-visible style, and truncate the current page title with an ellipsis if it exceeds 20ch.

Try it Yourself HTML

<style>
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
  /* TODO: separator with li + li::before */
  /* TODO: focus-visible and aria-current styles, ellipsis */
</style>
<nav class='crumbs' aria-label='Breadcrumb'>
  <ol>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Shop</a></li>
    <li><a href='#'>Shoes</a></li>
    <li>Very long product name that should be truncated</li>
  </ol>
</nav>

Output

Press Run to execute.

Show expected output

Breadcrumb items are separated with a visual separator, the current page is emphasized and truncated with an ellipsis, and links show a visible focus outline.

This is a self-check — compare your result with the expected output above.

Was this page helpful?

What are pagination and breadcrumbs?

Breadcrumbs: semantic HTML

Breadcrumbs: styling

Breadcrumb structured data (SEO)

Pagination: semantic HTML

Designing pagination

Pagination, load more or infinite scroll?

SEO notes for pagination

Quick summary