UI & Components

Breadcrumb and Pagination

Breadcrumb and Pagination: anatomy, keyboard behavior, state, and theming in Askr.

Example

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@askrjs/themes/components';

<Breadcrumb aria-label="Breadcrumb">
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href={projectsRoute}>Projects</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>{project.name}</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Two small, unrelated-but-neighboring kits: Breadcrumb answers "where am I in the hierarchy," and Pagination answers "which page of results am I on." Both are plain markup/slot components — no routing awareness, no fetching, no page-count math baked in.

Install and import

tsx import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from '@askrjs/themes/breadcrumb'; import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, } from '@askrjs/themes/pagination';

Live examples

The example composes Breadcrumb down to the current page, with BreadcrumbPage marking the last crumb rather than a link — that is what stops a screen reader announcing the page you are already on as somewhere to go. Build the intermediate BreadcrumbLink destinations from route parameters so the trail stays correct when the route shape changes.

Anatomy

Breadcrumb renders <nav role="navigation">, BreadcrumbList an <ol>, BreadcrumbItem an <li>, and BreadcrumbLink an <a>; BreadcrumbPage is a <span> for the current, non-linked crumb. BreadcrumbSeparator and BreadcrumbEllipsis default their children to "/" and "..." respectively. Pagination mirrors the same shape: <nav role="navigation"> wrapping a PaginationContent <ul> of PaginationItem <li>s, with PaginationLink, PaginationPrevious (default label "Previous"), PaginationNext (default label "Next"), and PaginationEllipsis (default "...") as the individual <a>/<span> controls.

State model

Neither component knows which page or crumb is active on its own. For pagination, you pass active to PaginationLink yourself for the current page — it's the only prop that isn't purely cosmetic, and it drives both aria-current and a data-active attribute. For breadcrumbs, you simply render the last segment as BreadcrumbPage instead of BreadcrumbLink. Route state, current page number, and total-page math all live in your app code.

Keyboard and accessibility

Links are real <a> elements, so Tab and Enter work without any extra wiring. BreadcrumbPage sets aria-current="page" for you automatically; PaginationLink only sets it when you pass active. Both BreadcrumbSeparator/BreadcrumbEllipsis and PaginationEllipsis are marked aria-hidden="true" by default so screen readers skip the decorative slashes and dots rather than announcing them.

Styling and tokens

Each part exposes a matching data-slot: breadcrumb, breadcrumb-list, breadcrumb-item, breadcrumb-link, breadcrumb-page, breadcrumb-separator, breadcrumb-ellipsis on one side, and pagination, pagination-content, pagination-item, pagination-link, pagination-previous, pagination-next, pagination-ellipsis on the other. PaginationLink additionally exposes data-active="true" when it's the current page, which is the natural CSS hook for highlighting it.

API

All parts take the shared props — as, asChild, class, children, ref, plus passthrough attributes. The one addition worth knowing is PaginationLink's active?: boolean. Separator and ellipsis components accept a children override if you want something other than the default "/" or "..." glyph.

Edge cases

Long breadcrumb trails don't auto-collapse — if you want a truncated trail with BreadcrumbEllipsis standing in for hidden segments, you decide when and where to insert it. Same for pagination with many pages: there's no windowing logic shipped, so figuring out where PaginationEllipsis belongs is your app's job. If a page has more than one nav landmark (say, both a breadcrumb and the primary navigation menu), give each an aria-label yourself since neither component sets one automatically, and screen reader users rely on that label to tell them apart.

Navbar and Navigation Menu for the primary nav bar these often sit under, Data Table for paginated tabular data, and Application Chrome for how breadcrumbs and pagination fit into a full page layout.