Slash Breadcrumb

slash x muted

Simple breadcrumb with slash separators. From Bundui.

breadcrumbslashnavbundui

Code

breadcrumb-slash.tsx

import Link from "next/link";

export function Breadcrumb({ trail }: { trail: { label: string; href?: string }[] }) {
  return (
    <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-sm text-muted-foreground">
      {trail.map((crumb, i) => (
        <span key={crumb.label} className="flex items-center gap-2">
          {i > 0 && <span aria-hidden>/</span>}
          {crumb.href
            ? <Link href={crumb.href} className="transition-colors hover:text-foreground">{crumb.label}</Link>
            : <span className="text-foreground">{crumb.label}</span>}
        </span>
      ))}
    </nav>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Slash Breadcrumb component and wire it to my accent.”