---
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/pl/components/breadcrumb
---

# Breadcrumb Component

 Komponenty Breadcrumb pokazują hierarchię nawigacji i pomagają użytkownikom zrozumieć ich lokalizację w witrynie. Zbudowane z semantycznych elementów nawigacyjnych HTML i punktów orientacyjnych ARIA zapewniających dostępność, bułka tarta poprawia użyteczność, umożliwiając użytkownikom szybkie nawigowanie do sekcji nadrzędnych. System nawigacyjny Frutjam automatycznie renderuje separatory i obsługuje niestandardowe separatory w celu elastycznej stylizacji.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa                | Typ         | Opis                                           |
| -------------------- | ----------- | ---------------------------------------------- |
| breadcrumb           | Opierać     | Kontener nawigacyjny dla ścieżki nawigacyjnej  |
| breadcrumb-list      | Modyfikator | Uporządkowana lista elementów nawigacyjnych    |
| breadcrumb-item      | Modyfikator | Indywidualny element listy w menu nawigacyjnym |
| breadcrumb-link      | Modyfikator | Element kotwicy w stylu łącza nawigacyjnego    |
| breadcrumb-separator | Modyfikator | Element oddzielający pomiędzy elementami       |
| breadcrumb-current   | Modyfikator | Zaznacza bieżący (aktywny) element strony      |

## Podstawowe użycie

Jeśli nie podano separatora, pomiędzy elementami menu nawigacyjnego automatycznie wyświetlana jest strzałka.

## Separatory bułki tartej

### Bułka tarta z separatorem tekstu

```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>
```

### Bułka tarta z separatorem 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>
```

## Dostępność nawigacyjna

Aby zapewnić dostępność nawigacji dla czytników ekranu:

- Zawiń strukturę w element `<nav>` z elementem `aria-label="Breadcrumb"`.
- Ostatni element (bieżąca strona) powinien używać `aria-current="page"` i najlepiej być `<span>`, a nie linkiem.
- Czytniki ekranu powinny ignorować separatory (często obsługiwane przez CSS lub `aria-hidden="true"`, jeśli używany jest element fizyczny).