blurrow/ui
navigation

breadcrumb

shows where you are, and how you got there.

installation

new to blurrow? this sets up your project in one go: the package, the styles and the font. already done it? skip straight to usage. the installation page has the details.

bash
npx @blurrow/ui init
›rather own the code? copy the source instead

let the cli copy it, along with anything it needs:

bash
npx @blurrow/ui add breadcrumb

or by hand: drop this file into components/ui and import from there.

components/ui/Breadcrumb.tsxtsx
import React from "react";


interface BreadcrumbItem {
  label: string;
  href?: string;
}


interface BreadcrumbProps {
  items: BreadcrumbItem[];
  className?: string;
}


export function Breadcrumb({ items, className = "" }: BreadcrumbProps) {
  return (
    <nav aria-label="Breadcrumb" className={className}>
      <ol className="flex items-center gap-1 flex-wrap">
        {items.map((item, i) => {
          const isLast = i === items.length - 1;


          return (
            <li key={i} className="flex items-center gap-1 min-w-0">
              {i > 0 && (
                <svg
                  aria-hidden
                  width="12"
                  height="12"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  viewBox="0 0 24 24"
                  className="text-neutral-300 shrink-0"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                </svg>
              )}
              {isLast || !item.href ? (
                <span
                  aria-current={isLast ? "page" : undefined}
                  className={[
                    "text-[12.5px] px-1.5 py-0.5 truncate",
                    isLast ? "font-medium text-neutral-900" : "text-neutral-500",
                  ].join(" ")}
                >
                  {item.label}
                </span>
              ) : (
                <a
                  href={item.href}
                  className="text-[12.5px] text-neutral-500 hover:text-neutral-900 px-1.5 py-0.5 rounded-[6px] hover:bg-neutral-900/[0.05] transition-colors truncate"
                >
                  {item.label}
                </a>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

usage

tsx
import { Breadcrumb } from "@blurrow/ui";
tsx
<Breadcrumb items={[{ label: "home", href: "/" }, { label: "components" }]} />

props

straight from the source, so they're always up to date.

propsts
interface BreadcrumbItem {
  label: string;
  href?: string;
}


interface BreadcrumbProps {
  items: BreadcrumbItem[];
  className?: string;
}
previous←paginationnextsidebar→