Breadcrumb

Navigation 2

About

A navigation trail of links showing the current page's location within a site's hierarchy, with a themed muted text style.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breadcrumb to your project and fits it to your theme.

Code

How Breadcrumb is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import BjorkBreadcrumb, {
  BjorkBreadcrumbList,
  BjorkBreadcrumbItem,
  BjorkBreadcrumbLink,
  BjorkBreadcrumbPage,
  BjorkBreadcrumbSeparator,
} from "@/components/ui/primitive-breadcrumb";

export default function BreadcrumbDemo() {
  return (
    <BjorkBreadcrumb>
      <BjorkBreadcrumbList>
        <BjorkBreadcrumbItem>
          <BjorkBreadcrumbLink href="/">Home</BjorkBreadcrumbLink>
        </BjorkBreadcrumbItem>
        <BjorkBreadcrumbSeparator />
        <BjorkBreadcrumbItem>
          <BjorkBreadcrumbLink href="/components">
            Components
          </BjorkBreadcrumbLink>
        </BjorkBreadcrumbItem>
        <BjorkBreadcrumbSeparator />
        <BjorkBreadcrumbItem>
          <BjorkBreadcrumbPage>Breadcrumb</BjorkBreadcrumbPage>
        </BjorkBreadcrumbItem>
      </BjorkBreadcrumbList>
    </BjorkBreadcrumb>
  );
}