Bileşenler

Breadcrumbs

Geçerli sayfanın hiyerarşideki yerini gösteren, uzun yolları katlayan konum izi.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Uzun yolda “…” düğmesini etkinleştirip gizli konumların yerinde açılmasına bakın.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Son öğe geçerli sayfadır: bağlantı olmaz, aria-current="page" taşır. Öncekiler bağlantıdır ve araya ok simgesi girer.

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' },
      ]}
    />
  );
}

Katlanmış yol

Öğe sayısı maxItems değerini (varsayılan 4) aşarsa ilk öğe ve son maxItems - 1 öğe görünür kalır; ortadakiler “…” düğmesinde toplanır. Düğme yolu yerinde açar ve odak ilk açılan bağlantıya geçer.

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

export default function Collapsed() {
  return (
    <Breadcrumbs
      maxItems={4}
      items={[
        { label: 'Ana sayfa', href: '#home' },
        { label: 'Birinci düzey', href: '#first' },
        { label: 'İkinci düzey', href: '#second' },
        { label: 'Üçüncü düzey', href: '#third' },
        { label: 'Dördüncü düzey', href: '#fourth' },
        { label: 'Geçerli sayfa' },
      ]}
    />
  );
}

Özel ad

label gezinti bölgesinin adını belirler. Varsayılan “Konum”dur; sayfada birden çok konum izi varsa ya da bağlam gerekiyorsa değiştirin.

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

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

Açık ve koyu mod

Renkler color-fg-* ve color-icon-* token’larından gelir; iki modda ayrı ayar gerekmez.

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' },
      ]}
    />
  );
}