---
title: "Breadcrumb"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Breadcrumb using semantic HTML for accessible, SEO-friendly navigation trails. Supports custom separators, icons, and responsive layouts."
url: https://frutjam.com/id/components/breadcrumb
---

# Breadcrumb Component

 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                                      |
| -------------------- | -------- | ----------------------------------------------- |
| breadcrumb           | Basis    | Wadah navigasi untuk jejak remah roti           |
| breadcrumb-list      | Pengubah | Daftar item remah roti yang dipesan             |
| breadcrumb-item      | Pengubah | Item daftar individual di remah roti            |
| breadcrumb-link      | Pengubah | Elemen jangkar ditata sebagai tautan remah roti |
| breadcrumb-separator | Pengubah | Elemen pemisah antar item                       |
| breadcrumb-current   | Pengubah | Menandai item halaman saat ini (aktif).         |

## Penggunaan Dasar

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

## Pemisah Remah Roti

### Remah roti dengan Pemisah Teks

```html
<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
<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).