registry:component

Aavya Breadcrumbs

v0.2.0beta

Route-aware breadcrumb navigation for App Router pages.

Registry Endpoint

Open JSON

https://registry.aavya.com/r/aavya-breadcrumbs.json

npx shadcn@latest add https://registry.aavya.com/r/aavya-breadcrumbs.json

Live Preview

Preview Route

Open /brand-guidelines/logo

Usage Snippet

import Breadcrumbs from '@/components/layout/breadcrumbs.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <Breadcrumbs />
    </div>
  )
}

Source Preview

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Fragment } from 'react'
import { Home } from 'lucide-react'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'

const segmentLabels: Record<string, string> = {
  'brand-guidelines': 'Brand Guidelines',
  'design-tokens': 'Design Tokens',
  'border-radius': 'Border Radius',
  registry: 'Registry',
  'theme-generator': 'Example UI',
  'auth': 'Auth',
  'api': 'API',
}

function getSegmentLabel(segment: string) {
  return (
    segmentLabels[segment] ??
    segment
      .split('-')
      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
      .join(' ')
  )
}

export function Breadcrumbs() {
  const pathname = usePathname()

  const segments = pathname.split('/').filter(Boolean)

  if (segments.length === 0) {
    return (
      <Breadcrumb className="mb-5">
        <BreadcrumbList>
          <BreadcrumbItem className="font-medium text-foreground">
            <Home className="h-3.5 w-3.5" />
            Home
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    )
  }

  return (
    <Breadcrumb className="mb-5">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink
            asChild
            className="inline-flex items-ce