Pagination and breadcrumbs

tier 2 — classes

Moving through a long result set, and saying where the current page sits.

Pages are addresses. Use <a href> for every page that exists, not <button> — a page of results should be linkable, openable in a new tab and reachable with the back button. Only the disabled ends are buttons or spans.

Pagination

Wrap it in <nav aria-label="Pagination"> and put aria-current="page" on the current one. The class colours it; aria-current is what is announced. .page-count pushes the range to the far end, which is where the reader looks to find out how much is left.

<nav class="pagination" aria-label="Pagination">
    <span class="page-link" aria-disabled="true"><i class="ri-arrow-left-s-line"></i> Previous</span>
    <a class="page-link" href="#" aria-label="Page 1">1</a>
    <a class="page-link" href="#" aria-current="page" aria-label="Page 2">2</a>
    <a class="page-link" href="#" aria-label="Page 3">3</a>
    <span class="page-gap" aria-hidden="true">&hellip;</span>
    <a class="page-link" href="#" aria-label="Page 61">61</a>
    <a class="page-link" href="#">Next <i class="ri-arrow-right-s-line"></i></a>
    <span class="page-count">21&ndash;40 of 1,204</span>
</nav>

Breadcrumbs

For where a page sits when the sidebar cannot show it — a record three levels inside a section. If the sidebar already highlights the page, a breadcrumb repeats it and earns nothing.

The separator is a pseudo-element, so it is never selected when the trail is copied and never read out. The last item is the current page: mark it aria-current="page" and leave it a <span>, not a link to where you already are. Long trails scroll, and it is the leading edge that gets cut, because the levels nearest the current page are the useful ones.

<nav class="breadcrumb" aria-label="Breadcrumb">
    <a class="breadcrumb-item" href="#"><i class="ri-home-4-line"></i> Console</a>
    <a class="breadcrumb-item" href="#">Orders</a>
    <a class="breadcrumb-item" href="#">EU-Central</a>
    <span class="breadcrumb-item" aria-current="page">ORD-4209</span>
</nav>

Prev, next and the range

Enough for a short list, and for a pager that has to live inside a toolbar row. .page-count is what makes it usable without numbers: “Next” alone does not say how much is left.

The disabled ends are <span aria-disabled="true">, not links to nowhere. A page that does not exist has no address, so there is nothing to link to.

<div class="dr-col dr-gap-2">
    <nav class="pagination" aria-label="Order pages">
        <a class="page-link" href="#"><i class="ri-arrow-left-s-line"></i> Previous</a>
        <span class="page-count">1,181&ndash;1,204 of 1,204</span>
        <span class="page-link" aria-disabled="true">Next <i class="ri-arrow-right-s-line"></i></span>
    </nav>
    <div class="toolbar">
        <div class="toolbar-filters">
            <label class="form-check"><input type="checkbox" /> Only mine</label>
        </div>
        <nav class="pagination" aria-label="Order pages">
            <span class="page-link" aria-disabled="true"><i class="ri-arrow-left-s-line"></i></span>
            <a class="page-link" href="#" aria-current="page" aria-label="Page 1">1</a>
            <a class="page-link" href="#" aria-label="Page 2">2</a>
            <a class="page-link" href="#" aria-label="Page 3">3</a>
            <a class="page-link" href="#" aria-label="Next page"><i class="ri-arrow-right-s-line"></i></a>
        </nav>
    </div>
</div>

Above the page head

Where a breadcrumb belongs: above the heading, so the trail is read before the title it leads to. .page-head then carries the title, the supporting line and the actions that apply to the whole page.

One <h1> per page, and it is this one. The breadcrumb is navigation, not a heading level.

ORD-4209

Five lines, three reserved. Raised 31 July at 09:14.

<div>
    <nav class="breadcrumb" aria-label="Breadcrumb">
        <a class="breadcrumb-item" href="#"><i class="ri-home-4-line"></i> Console</a>
        <a class="breadcrumb-item" href="#">Orders</a>
        <a class="breadcrumb-item" href="#">EU-Central</a>
        <span class="breadcrumb-item" aria-current="page">ORD-4209</span>
    </nav>
    <div class="page-head">
        <div class="page-head-text">
            <h1>ORD-4209</h1>
            <p class="lede">Five lines, three reserved. Raised 31 July at 09:14.</p>
        </div>
        <div class="page-head-actions">
            <button class="btn" type="button"><i class="ri-printer-line"></i> Print</button>
            <button class="btn btn-go" type="button"><i class="ri-send-plane-line"></i> Dispatch</button>
        </div>
    </div>
</div>