Breadcrumb

Navigation breadcrumb trails with composable items, links, current page indicator, and customizable separators — slash, chevron, or any custom element.

Preview

Basic breadcrumb

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@/registry/ui-kit/tailwind-breadcrumb/react'

function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Products</BreadcrumbLink>
        <BreadcrumbSeparator />
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbPage>Details</BreadcrumbPage>
      </BreadcrumbItem>
    </Breadcrumb>
  )
}

With chevron separator

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@/registry/ui-kit/tailwind-breadcrumb/react'

function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
        <BreadcrumbSeparator>
          <svg className="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6" /></svg>
        </BreadcrumbSeparator>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Settings</BreadcrumbLink>
        <BreadcrumbSeparator>
          <svg className="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6" /></svg>
        </BreadcrumbSeparator>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbPage>Profile</BreadcrumbPage>
      </BreadcrumbItem>
    </Breadcrumb>
  )
}

Component API

Prop	Default	Description
`Breadcrumb`	`—`	Wrapper nav element with aria-label="Breadcrumb", renders an ordered list.
`BreadcrumbItem`	`—`	List item wrapper with flex layout and gap.
`BreadcrumbLink`	`—`	Anchor link for non-current breadcrumb items.
`BreadcrumbPage`	`—`	Current page indicator span with font-medium styling and aria-current.
`BreadcrumbSeparator`	`"/"`	Separator between items. Defaults to slash, accepts children for custom separators.

Source Code

"use client";

/* ── Breadcrumb ── */

interface BreadcrumbProps {
  children: React.ReactNode;
  className?: string;
}

function Breadcrumb({ children, className = "" }: BreadcrumbProps) {
  return (
    <nav aria-label="Breadcrumb" className={className}>
      <ol className="flex items-center gap-2 text-sm">{children}</ol>
    </nav>
  );
}

/* ── BreadcrumbItem ── */

interface BreadcrumbItemProps {
  children: React.ReactNode;
  className?: string;
}

function BreadcrumbItem({ children, className = "" }: BreadcrumbItemProps) {
  return (
    <li className={`flex items-center gap-2 ${className}`}>{children}</li>
  );
}

/* ── BreadcrumbLink ── */

interface BreadcrumbLinkProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  children: React.ReactNode;
  className?: string;
}

function BreadcrumbLink({
  children,
  className = "",
  ...props
}: BreadcrumbLinkProps) {
  return (
    <a
      className={`text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 transition-colors ${className}`}
      {...props}
    >
      {children}
    </a>
  );
}

/* ── BreadcrumbPage ── */

interface BreadcrumbPageProps {
  children: React.ReactNode;
  className?: string;
}

function BreadcrumbPage({ children, className = "" }: BreadcrumbPageProps) {
  return (
    <span
      className={`font-medium text-zinc-900 dark:text-zinc-100 ${className}`}
      aria-current="page"
    >
      {children}
    </span>
  );
}

/* ── BreadcrumbSeparator ── */

interface BreadcrumbSeparatorProps {
  children?: React.ReactNode;
  className?: string;
}

function BreadcrumbSeparator({
  children,
  className = "",
}: BreadcrumbSeparatorProps) {
  return (
    <span
      className={`text-zinc-300 dark:text-zinc-600 ${className}`}
      aria-hidden="true"
    >
      {children ?? "/"}
    </span>
  );
}

export {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
};
export default Breadcrumb;