@edux-design/breadcrumbs

Accessible breadcrumb primitives with no styling applied.

Install

npm i @edux-design/breadcrumbs

Usage

import { Breadcrumbs, BreadcrumbItem } from "@edux-design/breadcrumbs";

export function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
      <BreadcrumbItem current>Breadcrumbs</BreadcrumbItem>
    </Breadcrumbs>
  );
}

Router Links

To avoid full page reloads in SPA routers, render your router's Link via asChild.

import { Link } from "react-router-dom";
import { Breadcrumbs, BreadcrumbItem } from "@edux-design/breadcrumbs";

export function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem asChild>
        <Link to="/">Home</Link>
      </BreadcrumbItem>
      <BreadcrumbItem current>Page</BreadcrumbItem>
    </Breadcrumbs>
  );
}