Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Breadcrumb-Komponente

Zuletzt aktualisiert:

Nur CSS-CSS-Breadcrumb-Navigation von Tailwind mit benutzerdefinierten Trennzeichen und zugänglichem Markup für Orientierungspunkte. WCAG AA funktioniert mit Django, HTMX, Laravel, React und jedem Tailwind CSS v4-Projekt.

Breadcrumb-Komponenten zeigen die Navigationshierarchie und helfen Benutzern, ihre Position innerhalb einer Website zu verstehen. Breadcrumbs basieren auf semantischen HTML-Navigationselementen und ARIA-Markierungen für Barrierefreiheit und verbessern die Benutzerfreundlichkeit, indem sie Benutzern eine schnelle Navigation zu übergeordneten Abschnitten ermöglichen. Das Frutjam-Breadcrumb-System rendert automatisch Trennzeichen und unterstützt benutzerdefinierte Trennzeichen für flexibles Styling.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
breadcrumbBaseNavigationscontainer für Breadcrumb-Trail
breadcrumb-listModifikatorGeordnete Liste der Breadcrumb-Elemente
breadcrumb-itemModifikatorEinzelnes Listenelement im Breadcrumb
breadcrumb-linkModifikatorAnkerelement im Stil eines Breadcrumb-Links
breadcrumb-separatorModifikatorTrennelement zwischen Elementen
breadcrumb-currentModifikatorMarkiert das aktuelle (aktive) Seitenelement

Grundlegende Verwendung

Wenn kein Trennzeichen angegeben ist, wird zwischen den Breadcrumb-Elementen automatisch ein Pfeil angezeigt.

 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>

Brotkrümeltrenner

Breadcrumb mit Texttrennzeichen

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>

Breadcrumb mit Symboltrennzeichen

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>

Breadcrumb-Zugänglichkeit

Um sicherzustellen, dass Breadcrumbs für Screenreader zugänglich sind:

  • Wickeln Sie die Struktur in ein <nav>-Element mit einem aria-label="Breadcrumb" ein.
  • Das letzte Element (aktuelle Seite) sollte aria-current="page" verwenden und vorzugsweise ein <span> und kein Link sein.
  • Trennzeichen sollten von Screenreadern ignoriert werden (häufig über CSS oder aria-hidden="true" verarbeitet, wenn ein physisches Element verwendet wird).

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Semmelbrösel-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP