Data display

Breadcrumb

Where the page sits in the site: a navigation landmark with an ordered list; the last item is marked aria-current="page".

demos/breadcrumb.tsx

import { Breadcrumb } from "pixelbits/breadcrumb";

export default function Demo() {
  return (
    <Breadcrumb
      items={[
        { label: "Docs", href: "#docs" },
        { label: "Components", href: "#components" },
        { label: "Breadcrumb" },
      ]}
    />
  );
}

Installation

npm: import

import { Breadcrumb } from "pixelbits/breadcrumb";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/breadcrumb.json

API

<Breadcrumb>

Where the page sits in the site: a navigation landmark with an ordered list; the last item is marked aria-current="page".

Example

<Breadcrumb items={[{ label: "Docs", href: "/docs" }, { label: "Components", href: "/docs/components" }, { label: "Button" }]} />

Prop	Type	Default	Description
items*	Crumb[]	—	The trail from the root to the current page. The last item is current.
separator	ReactNode	a small chevron	What goes between items. The default chevron flips in RTL.
renderLink	(crumb: Crumb, className: string) => ReactNode	—	Render links with your router's component, e.g. `(c, cls) => <NextLink href={c.href} className={cls}>{c.label}</NextLink>`.
aria-label	string	"Breadcrumb"	Accessible name of the navigation landmark.

Also accepts every prop of HTMLAttributes<HTMLElement>.