DevPanicZone Logo DevPanicZone! Cheatsheets.

HTML Breadcrumbs

Breadcrumb-Navigation für bessere Orientierung und SEO - mit semantischem HTML und Schema.org Markup.

Was sind Breadcrumbs?

Breadcrumbs (Brotkrümel) zeigen dem Nutzer, wo er sich in der Seitenhierarchie befindet. Der Name stammt aus dem Märchen "Hänsel und Gretel" - wie die Brotkrümel im Wald helfen sie, den Weg zurückzufinden.

Sie sind besonders wichtig für:

  • Orientierung: Nutzer sehen sofort, wo sie sich befinden
  • Navigation: Schneller Sprung zu übergeordneten Ebenen
  • SEO: Google zeigt Breadcrumbs in den Suchergebnissen an
HTML 
<nav aria-label="Breadcrumb">
    <ol class="breadcrumb-demo">
        <li><a href="/">Home</a></li>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/tutorials/html/">HTML</a></li>
        <li><a href="#" aria-current="page">Breadcrumb Navigation</a></li>
    </ol>
</nav>
Details zum CSS
CSS 
.breadcrumb-demo {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* Umbruch bei wenig Platz */
    padding: 0.75rem 1rem;
    margin: 0;
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* Trennzeichen zwischen den Elementen */
.breadcrumb-demo li+li::before {
    content: '›';
    /* oder '»' oder '→' oder '/' */
    padding: 0 0.5rem;
    color: var(--text-secondary);
}

.breadcrumb-demo a {
    color: var(--accent-blue);
    text-decoration: none;
}

.breadcrumb-demo a:hover {
    text-decoration: underline;
}

/* Aktuelle Seite (nicht klickbar) */
.breadcrumb-demo [aria-current="page"] {
    color: var(--text-secondary);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}
Warum <ol> statt <ul>?

Breadcrumbs haben eine klare Reihenfolge Home → Kategorie → Unterkategorie → Seite, daher ist eine geordnete Liste <ol> semantisch korrekter. Screenreader geben dann auch "Element 1 von 4" aus.

Wann Breadcrumbs verwenden?

Nicht jede Website braucht Breadcrumbs. Sie sind sinnvoll bei:

Breadcrumbs empfohlen
  • Websites mit mehr als 2 Hierarchie-Ebenen
  • Online-Shops mit Kategorien
  • Dokumentationen und Tutorials
  • News-Portale mit Rubriken
  • Große Unternehmenswebsites
Breadcrumbs unnötig
  • Einfache One-Pager
  • Websites mit flacher Struktur
  • Landing Pages
  • Persönliche Portfolios
  • Seiten ohne klare Hierarchie

Trennzeichen-Varianten

Das Trennzeichen zwischen den Ebenen ist reine Geschmackssache. Hier die gängigsten Optionen:

CSS 
/* Schrägstrich (Standard) */
.breadcrumb li + li::before {
    content: '/';
}

/* Pfeil nach rechts */
.breadcrumb li + li::before {
    content: '→';
}

/* Chevron / Größer-Zeichen */
.breadcrumb li + li::before {
    content: '›';      /* oder '>' */
}

/* Doppel-Chevron */
.breadcrumb li + li::before {
    content: '»';
}
Tipp

Verwende CSS ::before statt echte Zeichen im HTML. So bleiben die Trennzeichen für Screenreader unsichtbar und stören nicht beim Vorlesen.

Schema.org Markup für SEO

Mit strukturierten Daten versteht Google deine Breadcrumbs besser und zeigt sie in den Suchergebnissen an. Es gibt zwei Varianten:

JSON-LD (empfohlen)

Google empfiehlt JSON-LD. Das Script kommt in den <head> oder vor </body>:

HTML 
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://example.com/"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Tutorials",
            "item": "https://example.com/tutorials/"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "HTML",
            "item": "https://example.com/tutorials/html/"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Breadcrumbs"
        }
    ]
}
</script>
Wichtig

Das letzte Element (aktuelle Seite) hat keine "item"-URL - das ist korrekt so! Google weiß, dass es die aktuelle Seite ist.

Microdata (Alternative)

Bei Microdata werden die Attribute direkt ins HTML eingefügt:

HTML 
<nav aria-label="Breadcrumb">
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="/">
                <span itemprop="name">Home</span>
            </a>
            <meta itemprop="position" content="1">
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="/tutorials/">
                <span itemprop="name">Tutorials</span>
            </a>
            <meta itemprop="position" content="2">
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name">Breadcrumbs</span>
            <meta itemprop="position" content="3">
        </li>
    </ol>
</nav>

JSON-LD vs. Microdata: JSON-LD ist einfacher zu pflegen, da es vom HTML getrennt ist. Microdata ist kompakter, aber schwerer lesbar.

Accessibility (Barrierefreiheit)

Damit Breadcrumbs für alle Nutzer zugänglich sind:

1. Navigation kennzeichnen

HTML 
<!-- Screenreader liest: "Breadcrumb Navigation" -->
<nav aria-label="Breadcrumb">
    ...
</nav>

2. Aktuelle Seite markieren

HTML 
<!-- aria-current="page" signalisiert: "Du bist hier" -->
<li>
    <span aria-current="page">Breadcrumbs</span>
</li>

3. Trennzeichen für Screenreader verstecken

CSS-generierte Inhalte (::before) werden von modernen Screenreadern meist ignoriert. Falls du Trennzeichen im HTML verwendest:

HTML 
<!-- aria-hidden versteckt das Zeichen vor Screenreadern -->
<li><a href="/">Home</a></li>
<span aria-hidden="true">/</span>
<li><a href="/tutorials/">Tutorials</a></li>

Best Practices

Do
  • Mit "Home" oder einem Haus-Icon starten
  • Aktuelle Seite als letztes Element (nicht klickbar)
  • Kurze, prägnante Bezeichnungen
  • Konsistente Platzierung (meist unter dem Header)
  • Geordnete Liste <ol> verwenden
Don't
  • Mehr als 4-5 Ebenen anzeigen
  • Aktuelle Seite als klickbaren Link
  • Breadcrumbs als einzige Navigation
  • Lange Seitentitel verwenden
  • Breadcrumbs auf der Startseite

Mobile: Kürzen bei wenig Platz

Auf kleinen Bildschirmen können Breadcrumbs umbrechen oder gekürzt werden:

CSS 
/* Nur die letzten 2 Ebenen auf Mobile zeigen */
@media (max-width: 600px) {
    .breadcrumb li:not(:nth-last-child(-n+2)) {
        display: none;
    }
    
    /* Ellipsis vor dem ersten sichtbaren Element */
    .breadcrumb li:nth-last-child(2)::before {
        content: '... / ';
    }
}

Zusammenfassung

HTML 
<!-- Minimales Breadcrumb-Template -->
<nav aria-label="Breadcrumb">
    <ol class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li><a href="/kategorie/">Kategorie</a></li>
        <li><span aria-current="page">Aktuelle Seite</span></li>
    </ol>
</nav>
Merke
  • <nav aria-label="Breadcrumb"> - Kennzeichnet die Navigation
  • <ol> - Geordnete Liste für die Hierarchie
  • aria-current="page" - Markiert die aktuelle Seite
  • Schema.org - Optional für bessere SEO

Mehr aus HTML

Tutorials werden geladen...