Breadcrumb

Özelleştirilebilir ayraçlara sahip hiyerarşik sayfa navigasyonu.

Breadcrumb.tsx

Standart & Ev İkonlu

Kart / Solid Arka Planlı

Pills / Rozet Stili

Otomatik Katlanan Uzun Yol (maxItems=4)

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/breadcrumb.json

Kullanım Örneği

import { Breadcrumb } from "@/components/ui/Breadcrumb"

<Breadcrumb
  homeHref="/"
  maxItems={4}
  items={[
    { label: "Projeler", href: "/projects" },
    { label: "Archintel", href: "/projects/archintel" },
    { label: "Ayarlar" },
  ]}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
items	BreadcrumbItem[]	—	Bağlantı, aktif durum ve isteğe bağlı alt menü içeren yol öğeleri.
separator	ReactNode	—	Öğeler arasında gösterilen özel ayraç.
size	"xs" \| "sm" \| "md" \| "lg"	"sm"	Yolun görsel boyutu.
variant	"default" \| "solid" \| "ghost" \| "pills"	"default"	Arka plan ve öğe sunumu.
maxItems	number	—	Daraltılmış görünümde gösterilecek toplam öğe sayısı; minimum üçtür.
homeHref	string	—	Başlangıca otomatik ana sayfa öğesi ekler.
ariaLabel	string	"Sayfa yolu"	Navigasyon bölgesinin erişilebilir adı.
expandLabel	string	"Gizli adımları göster"	Daraltılmış yol düğmesinin erişilebilir etiketi.