Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Składnik bułki tartej

Ostatnia aktualizacja:

Nawigacja nawigacyjna CSS Tailwind, oparta wyłącznie na CSS, z niestandardowymi separatorami i dostępnymi znacznikami punktów orientacyjnych. WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.

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

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Bułka tarta. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP