Sayfa içi konum izleme — her zaman home ikonuyla başlar, ortadaki noktalı separator (·) ile ayrılır. Derin sayfalarda ortayı ellipsis'le kısaltır, en sondaki kırılma her zaman tam görünür.
01 · Temel kullanım
2-4 seviye — separator olarak orta nokta (·), home her zaman ikon
İki seviye
Üç seviye
Dört seviye — derin sayfa
02 · Maks. uzunluk + ellipsis
5+ seviye veya çok uzun isim — orta segmentler "…" haline gelir, ilk + son her zaman görünür
Detay sayfalarının üstünde — sayfa başlığından önce geliyor, h1 ile aynı blok'ta
Sipariş #1234
14 Mayıs 2026 · 14:32 · 3 ürün · 475,00 TL
WhatsApp Bağlantısı
Lezzet Köşesi · +90 532 555 12 34 · Aktif
04 · Etkileşim durumları
Hover, focus, current — current asla link değil, focus halkası emerald
Default
Hover (orta segment)
Focus (klavye)
Yapı kuralları
· Yapı: <nav aria-label="Breadcrumb"> içinde sırayla home + segment'ler. Son segment aria-current="page".
· Separator: orta nokta · (U+00B7), --text-subtle. Slash veya chevron kullanma — Nexberry dilinde nokta.
· Home: her zaman ikon, etiket "Ana sayfa" aria-label'da. Ev ikonunu metinle yazma.
· Segment renkleri: --text-muted (link), hover'da --text + --primary-50 bg, current --text font-weight 500.
· Maks. 4 görünür kırılma; 5+ ise ortayı … ile katla. Tıklanınca gizli segment'ler dropdown'da.
· Tek segment uzunluksa: son crumb max-width: 280px + ellipsis. Tooltip ile tam metin gösterilir.
· Page header'da: breadcrumb + h1 + meta sıralaması; breadcrumb 13px, h1 22px, meta 13px.
· Mobilde (≤640px): sadece geri ok + üst seviye gösterilir, tam path drawer'da açılır.
· Erişilebilirlik: separator'lar aria-hidden, current crumb tıklanamaz (button/anchor değil span).
· Yasak: breadcrumb içinde rozet, ikon (home hariç), durum noktası — sadece konum izi taşır.