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

İçerik Kırıntısı Bileşeni

Son güncelleme:

Özel ayırıcılar ve erişilebilir yer işareti işaretlemesi ile yalnızca CSS'ye özel Tailwind CSS içerik haritası navigasyonu. WCAG AA, Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.

İç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).

Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam Ekmek kırıntısı sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin