Breadcrumb

Mevcut sayfanın hiyerarşideki yerini, her üst sayfaya link vererek gösterir.

import { Breadcrumb } from "@merid/react";

export function Example() {
  return (
    <Breadcrumb.Root aria-label="Sayfa yolu">
      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">Ana sayfa</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">Projeler</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Breadcrumb.Page>Northwind</Breadcrumb.Page>
      </Breadcrumb.Item>
    </Breadcrumb.Root>
  );
}

Import

import { Breadcrumb } from "@merid/react";

Anatomi

<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/" />
  </Breadcrumb.Item>
  <Breadcrumb.Item>
    <Breadcrumb.Page />
  </Breadcrumb.Item>
</Breadcrumb.Root>

• Breadcrumb.Root: sıralı bir listeyi saran <nav> landmark'ı.
• Breadcrumb.Item: yoldaki bir <li>. Ayraçlar item'ların arasına CSS ile çizilir.
• Breadcrumb.Link: bir üst sayfaya giden <a>.
• Breadcrumb.Page: aria-current="page" taşıyan, düz metin olarak mevcut sayfa.

Örnekler

Uzun yol

Yer kalmadığında mevcut sayfa alt satıra geçmek yerine üç noktayla kısaltılır; genişliği sınırlı bir alanda item'ına min-width: 0 ver. Listenin kendisi item'lar arasında alt satıra geçer.

<Breadcrumb.Root aria-label="Ayarlardaki konum" style={{ maxWidth: 320 }}>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="#">Ayarlar</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="#">Faturalandırma</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Item style={{ minWidth: 0 }}>
    <Breadcrumb.Page>Eylül ayı faturası INV-2026-000482</Breadcrumb.Page>
  </Breadcrumb.Item>
</Breadcrumb.Root>

Router ile

Breadcrumb.Link düz bir <a> render'lar ve as prop'u almaz. Client tarafı routing için router'ının link'ini Breadcrumb.Item'ın içine koy ve ona className="mrd-breadcrumb__link" ekle.

API referansı

Breadcrumb.Root

<nav> render'lar ve tüm HTML attribute'larını kabul eder.

Breadcrumb.Item

<li> render'lar ve tüm HTML attribute'larını kabul eder. Ek prop'u yoktur.

Breadcrumb.Link

Varsayılan olarak <a> render'lar ve tüm anchor attribute'larını kabul eder. Onun yerine bir router link'i render'lamak için as ver; to gibi ek prop'lar iletilir.

Breadcrumb.Page

<span aria-current="page"> render'lar ve tüm HTML attribute'larını kabul eder. Ek prop'u yoktur.

Stil verme

• .mrd-breadcrumb: nav root.
• .mrd-breadcrumb__list: ol elemanı; --mrd-text-xs boyutunda, alt satıra geçebilen bir flex satırı.
• .mrd-breadcrumb__item: her li; .mrd-breadcrumb__item + .mrd-breadcrumb__item::before, / ayracını --mrd-placeholder renginde çizer.
• .mrd-breadcrumb__link: --mrd-body renginde üst sayfa link'i, hover'da --mrd-ink.
• .mrd-breadcrumb__page: --mrd-ink renginde, orta kalınlıkta, tek satırda üç noktayla kısalan mevcut sayfa.

Ayraç content: "/" / "" kullanır; alternatif metni boş olduğu için ekran okuyucu onu okumaz. Değiştirmek için kendi layer'ında .mrd-breadcrumb__item + .mrd-breadcrumb__item::before'u ez.

Erişilebilirlik

WAI-ARIA Breadcrumb desenini izler.

• Root, varsayılan olarak "Breadcrumb" adını taşıyan bir nav landmark'ıdır. Sayfada birden çok navigasyon landmark'ı varsa aria-label ile yeniden adlandır.
• Item'lar sıralı bir listedir; ekran okuyucular konumu ve toplam sayıyı okur.
• Son item Breadcrumb.Page kullanır; bu aria-current="page" atar ve link değildir.

Kullanım ilkeleri

İlgili sayfalar

• Link
• SidebarNav
• Pagination