Breadcrumbs

Ne zaman kullanılır

Breadcrumbs, kullanıcıya geçerli sayfanın hiyerarşideki yerini gösterir ve üst düzeylere tek tıkla dönmesini sağlar. Üç ya da daha fazla düzeyi olan yapılarda, örneğin ayar sayfalarında ve iç içe kayıt ekranlarında kullanın.

Ne zaman kullanılmaz

• Ana gezinme için: Sayfalar arası birincil gezinme kenar çubuğuna (AppShell) aittir.
• Aynı sayfanın bölümleri için: Bölümler arasında geçişte Tabs kullanın.
• Tek düzeyli yapılarda: Üst sayfa yoksa konum izi bilgi vermez; göstermeyin.
• Sıralı adımlar için: Adım sırası önemliyse Stepper kullanın.

Anatomi

1. Ana sayfa
2. Birinci düzey
3. Geçerli sayfa

Birinci düzey

AçıkKoyu

Kodu kopyala

import { Breadcrumbs } from '@bigbang/ui';

export default function Default() {
  return (
    <Breadcrumbs
      items={[
        { label: 'Ana sayfa', href: '#home' },
        { label: 'Birinci düzey', href: '#first' },
        { label: 'Geçerli sayfa' },
      ]}
    />
  );
}

1. Gezinme bölgesi (nav): aria-label ile adlandırılır; varsayılan ad “Konum”.
2. Öğe: Sıralı listede bir madde; ilk öğe dışında önünde ayırıcı vardır.
3. Ayırıcı: Sağa bakan ok simgesi; ekran okuyucudan gizlenir, sağdan sola dilde yansır.
4. Bağlantı: Link bileşeni (standalone, sm).
5. Geçerli sayfa: Bağlantısız metin; aria-current="page" taşır.
6. Katlama düğmesi: Uzun yolda gizlenen ortadaki öğelerin yerini alan “…” düğmesi.

Davranış

• items üst düzeyden geçerli sayfaya sıralanır; son öğe geçerli sayfadır.
• Öğe sayısı maxItems değerini aşarsa ilk öğe, “…” düğmesi ve son maxItems - 1 öğe görünür.
• “…” düğmesi yolu menü açmadan yerinde genişletir. Yeni öğeler kısa bir solma ve 4 px yükselmeyle girer, odak ilk açılan bağlantıya geçer ve düğme kaybolur.
• 640 px’in altında yalnızca üst sayfaya giden bağlantı gösterilir; solunda sola bakan ok vardır. Tam yol gizlenir.
• Bağlantılar href değerini denetler; javascript: gibi güvenli olmayan şemalar kaldırılır.
• Yönlendirici bağlantısı için render verin.

Yönergeler

• Etiketleri sayfanın başlığıyla aynı tutun; kullanıcı iki yerde farklı ad görmesin.
• Yolun tamamını verin; ara düzeyleri kendiniz atlamayın, katlamayı bileşene bırakın.
• Son öğeye href vermeyin; geçerli sayfa bağlantı olmaz.
• Konum izini sayfa başlığının üstüne koyun; bir sayfada bir tane kullanın.
• Uzun etiketleri kısaltmayın; şimdilik birden çok satıra sarılır.

İçerik

• Etiketler sayfa adlarıdır; fiil kullanmayın ve nokta koymayın.
• Ayırıcıyı (/, >) metne yazmayın; bileşen ekler.

Türkçe	İngilizce
Ana sayfa	Home
Birinci düzey	First level
Geçerli sayfa	Current page
Konum	Breadcrumb
Gizlenen konumları göster	Show hidden locations

İlgili bileşenler

• Link: Konum izindeki bağlantıların temelidir.
• PageHeader: Sayfa başlığıyla birlikte konum izini taşır.
• Tabs: Aynı sayfanın bölümleri arasında geçiş sağlar.