Breadcrumbs & pagination

Collection 1

Work 1–6 of 30

Page 1 of 5

Number of pages

1512

Usage

Breadcrumbs describe hierarchy. Pagination moves through a bounded result set. Keep the current location distinct and unavailable previous/next actions disabled.

Exports / Breadcrumbs, Pagination

Patterns

React

import { useState } from "react";
import { Breadcrumbs, Pagination } from "./folio";

export function NavigationExample() {
  const [page, setPage] = useState(1);
  return <><Breadcrumbs items={[{ label: "Library", href: "/library" }, { label: "Material studies" }]} />
    <Pagination page={page} pages={5} onChange={setPage} /></>;
}