Tailwind CSS cookbook · Beginner
Add breadcrumbs and pagination
Help users see where they are and move between pages of results.
Approach
Breadcrumbs are an ordered list in a <nav aria-label="Breadcrumb">; mark the current page with
aria-current="page". Pagination uses links with a highlighted current page.
Solution
<div class="space-y-6 p-6 text-sm">
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-2 text-slate-500">
<li><a href="#" class="hover:text-slate-900">Home</a></li><li aria-hidden="true">/</li>
<li><a href="#" class="hover:text-slate-900">Docs</a></li><li aria-hidden="true">/</li>
<li aria-current="page" class="font-medium text-slate-900">Pagination</li>
</ol>
</nav>
<nav aria-label="Pagination" class="flex gap-1">
<a href="#" class="rounded-md px-3 py-2 ring-1 ring-slate-200 hover:bg-slate-50">← Prev</a>
<a href="#" class="rounded-md px-3 py-2 hover:bg-slate-50">1</a>
<a href="#" aria-current="page" class="rounded-md bg-indigo-600 px-3 py-2 font-semibold text-white">2</a>
<a href="#" class="rounded-md px-3 py-2 hover:bg-slate-50">3</a>
<a href="#" class="rounded-md px-3 py-2 ring-1 ring-slate-200 hover:bg-slate-50">Next →</a>
</nav>
</div>
Pitfalls
- Separators read aloud by screen readers; hide them with
aria-hidden="true". - Styling the current page only with colour;
aria-currentalso tells assistive tech.
Variations
- Style from the attribute:
aria-[current=page]:bg-indigo-600keeps markup and visuals in sync.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/hover-focus-and-other-states#aria-states