Przejdź do głównej treści
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.

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
breadcrumbOpieraćKontener nawigacyjny dla ścieżki nawigacyjnej
breadcrumb-listModyfikatorUporządkowana lista elementów nawigacyjnych
breadcrumb-itemModyfikatorIndywidualny element listy w menu nawigacyjnym
breadcrumb-linkModyfikatorElement kotwicy w stylu łącza nawigacyjnego
breadcrumb-separatorModyfikatorElement oddzielający pomiędzy elementami
breadcrumb-currentModyfikatorZaznacza bieżący (aktywny) element strony

Podstawowe użycie

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

 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>

Separatory bułki tartej

Bułka tarta z separatorem tekstu

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>

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

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