Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Breadcrumb Component

CSS-only Tailwind CSS breadcrumb navigation with custom separators and accessible landmark markup. WCAG AA, works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

İçerik haritası bileşenleri gezinme hiyerarşisini gösterir ve kullanıcıların bir web sitesi içindeki konumlarını anlamalarına yardımcı olur. Erişilebilirlik için semantik HTML gezinme öğeleri ve ARIA yer işaretleri ile oluşturulan içerik haritaları, kullanıcıların ana bölümlere hızlı bir şekilde gitmesine olanak tanıyarak kullanılabilirliği artırır. Frutjam içerik haritası sistemi, ayırıcıları otomatik olarak işler ve esnek şekillendirme için özel ayırıcıları destekler.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
breadcrumbTemelİçerik haritası yolu için navigasyon kapsayıcısı
breadcrumb-listDeğiştiriciKırıntı öğelerinin sıralı listesi
breadcrumb-itemDeğiştiriciİçerik haritasındaki bireysel liste öğesi
breadcrumb-linkDeğiştiriciİçerik haritası bağlantısı olarak tasarlanmış bağlantı öğesi
breadcrumb-separatorDeğiştiriciÖğeler arasındaki ayırıcı öğe
breadcrumb-currentDeğiştiriciGeçerli (etkin) sayfa öğesini işaretler

Temel Kullanım

Ayırıcı sağlanmazsa, kırıntı öğeleri arasında otomatik olarak bir ok gösterilir.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav className="breadcrumb" aria-label="Breadcrumb">
  <ol className="breadcrumb-list">
    <li className="breadcrumb-item">
      <a href="/" className="breadcrumb-link">Home</a>
    </li>
    <li className="breadcrumb-item">
      <span className="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

Galeta Ayırıcıları

Metin Ayırıcılı İçerik Kırıntısı

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current" aria-current="page">Badge</span>
    </li>
  </ol>
</nav>

Simge Ayırıcılı İçerik Kırıntısı

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <span class="breadcrumb-current" aria-current="page">Button</span>
    </li>
  </ol>
</nav>

İçerik Haritası Erişilebilirliği

İçerik haritalarının ekran okuyucular tarafından erişilebilir olmasını sağlamak için:

  • Yapıyı bir <nav> öğesine aria-label="Breadcrumb" ile sarın.
  • Son öğe (geçerli sayfa) aria-current="page" kullanmalı ve tercihen bir bağlantı yerine <span> olmalıdır.
  • Ayırıcılar ekran okuyucular tarafından göz ardı edilmelidir (genellikle CSS veya fiziksel bir öğe kullanılıyorsa aria-hidden='true' aracılığıyla işlenir).