Shim

Breadcrumbs

Display a hierarchy of links to the current page.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Link
Install
pnpm dlx @kkga/shim add breadcrumbs
  1. Shim
  2. Docs
  3. Breadcrumbs
import { Breadcrumb, Breadcrumbs } from "@/shim-ui/breadcrumbs";

export default () => (
  <Breadcrumbs>
    <Breadcrumb href="#">Shim</Breadcrumb>
    <Breadcrumb href="#">Docs</Breadcrumb>
    <Breadcrumb href="#">Breadcrumbs</Breadcrumb>
  </Breadcrumbs>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add breadcrumbs

Size

Use the size prop to set the size of the breadcrumbs.

  1. Shim
  2. Docs
  3. Breadcrumbs
  1. Shim
  2. Docs
  3. Breadcrumbs
  1. Shim
  2. Docs
  3. Breadcrumbs
  1. Shim
  2. Docs
  3. Breadcrumbs
import { Breadcrumb, Breadcrumbs } from "@/shim-ui/breadcrumbs";

export default () =>
  ([1, 2, 3, 4] as const).map((size) => (
    <Breadcrumbs key={size} size={size}>
      <Breadcrumb href="#">Shim</Breadcrumb>
      <Breadcrumb href="#">Docs</Breadcrumb>
      <Breadcrumb href="#">Breadcrumbs</Breadcrumb>
    </Breadcrumbs>
  ));

Content

Breadcrumbs follow the Collections API and supports both static and dynamic items.

Pass an items prop and a render function as children to render dynamic collections. The render function receives each item from items and should return a React element.

  1. Shim
  2. Docs
  3. Breadcrumbs
"use client";
import { useState } from "react";
import type { Key } from "react-aria-components";
import { Breadcrumb, Breadcrumbs } from "@/shim-ui/breadcrumbs";

export default () => {
  let [breadcrumbs, setBreadcrumbs] = useState([
    { id: 1, label: "Shim", href: "#" },
    { id: 2, label: "Docs", href: "#" },
    { id: 3, label: "Breadcrumbs", href: "#" },
  ]);

  let navigate = (id: Key) => {
    let i = breadcrumbs.findIndex((item) => item.id === id);
    setBreadcrumbs(breadcrumbs.slice(0, i + 1));
  };

  return (
    <Breadcrumbs items={breadcrumbs} onAction={navigate}>
      {(item) => <Breadcrumb href={item.href}>{item.label}</Breadcrumb>}
    </Breadcrumbs>
  );
};