Skip to main content
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.

Komponen Breadcrumb menunjukkan hierarki navigasi dan membantu pengguna memahami lokasi mereka dalam situs web. Dibangun dengan elemen navigasi HTML semantik dan penanda ARIA untuk aksesibilitas, remah roti meningkatkan kegunaan dengan memungkinkan pengguna menavigasi dengan cepat ke bagian induk. Sistem remah roti Frutjam secara otomatis merender pemisah dan mendukung pemisah khusus untuk penataan gaya yang fleksibel.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
breadcrumbBasisWadah navigasi untuk jejak remah roti
breadcrumb-listPengubahDaftar item remah roti yang dipesan
breadcrumb-itemPengubahItem daftar individual di remah roti
breadcrumb-linkPengubahElemen jangkar ditata sebagai tautan remah roti
breadcrumb-separatorPengubahElemen pemisah antar item
breadcrumb-currentPengubahMenandai item halaman saat ini (aktif).

Penggunaan Dasar

Jika tidak ada pemisah yang disediakan, panah akan ditampilkan di antara item remah roti secara otomatis.

 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>

Pemisah Remah Roti

Remah roti dengan Pemisah Teks

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>

Remah roti dengan Pemisah Ikon

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>

Aksesibilitas Breadcrumb

Untuk memastikan remah roti dapat diakses oleh pembaca layar:

  • Gabungkan struktur dalam elemen <nav> dengan aria-label="Breadcrumb".
  • Item terakhir (halaman saat ini) harus menggunakan aria-current="page" dan sebaiknya berupa <span> daripada tautan.
  • Pemisah harus diabaikan oleh pembaca layar (sering ditangani melalui CSS atau aria-hidden="true" jika menggunakan elemen fisik).