UI & Components

Breadcrumb and Pagination

Use breadcrumb and pagination with the current published Askr packages.

@askrjs/themes/breadcrumb0.0.13
@askrjs/themes/pagination0.0.13

How to use breadcrumb and pagination

Breadcrumb and Pagination should use the standard themed surface unless the application is deliberately implementing its own design system on top of @askrjs/ui.

Import the themed component from @askrjs/themes/components; use @askrjs/ui directly only when building a custom visual system.
Keep breadcrumb and pagination labels, state, and application actions visible at the call site instead of styling internal DOM nodes.
Verify keyboard behavior, focus movement or return, disabled state, and both standard themes.

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>

Purpose

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

Implement live examples at the breadcrumb and pagination boundary: make inputs visible at the call site, keep cleanup with the work that created it, and render the success, unavailable, and failure states where a user can act on them.

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.