Breadcrumb-Navigation (Brotkrumen- / Brotkrümel-Navigation)

Was ist eine Breadcrumb-Navigation?

Eine Breadcrumb-Navigation ist eine sekundäre Navigationsform, die Nutzerinnen und Nutzern zeigt, wo sie sich aktuell innerhalb der Seitenstruktur Deiner Webseite befinden. Sie stellt den Pfad von der Startseite bis zur aktuell aufgerufenen Seite dar und besteht aus klickbaren Links.

Typisches Beispiel:

Startseite → Kategorie → Unterkategorie → Aktuelle Seite

Breadcrumbs verbessern sowohl die Benutzerfreundlichkeit (Usability) als auch die Suchmaschinenoptimierung (SEO), da Suchmaschinen die interne Seitenstruktur besser verstehen können.

Vorteile einer Breadcrumb-Navigation

  • bessere Orientierung für Besucher
  • schnellere Navigation zu übergeordneten Seiten
  • geringere Absprungrate
  • bessere interne Verlinkung
  • Darstellung der Breadcrumbs direkt in den Google-Suchergebnissen möglich
  • besonders hilfreich bei großen Webseiten, Online-Shops und Blogs

Breadcrumb-Navigation für HTML-Webseiten

Wenn Du Deine Webseite klassisch mit HTML, CSS und PHP erstellst, solltest Du von Beginn an auf eine logische Ordner- und Dateistruktur achten. Inhalte mit gleichem Themenbereich gehören in entsprechend benannte Verzeichnisse.

Beispiel:

/urlaub/
/urlaub/spanien/
/urlaub/spanien/mallorca.html

Eine saubere Struktur erleichtert nicht nur die Pflege Deiner Webseite, sondern ist auch die Grundlage für eine automatisch generierte Breadcrumb-Navigation.

Dynamische Breadcrumbs mit PHP

Eine effiziente Lösung besteht darin, auf jeder Seite lediglich einen PHP-Code-Schnipsel einzubinden, der den aktuellen Verzeichnispfad automatisch ausliest und als Breadcrumb-Navigation ausgibt. So bleibt der Pflegeaufwand minimal, selbst bei großen Webseiten.

Unten findest Du einen lizenzfreien (Public-Domain/Unlicense) PHP-Code für dynamische Breadcrumbs. Er funktioniert ohne externe Bibliotheken, ist SEO-freundlich, unterstützt Pretty-URLs und klassische Dateinamen, und Du kannst ihn sowohl in reinen HTML/PHP-Projekten als auch in Template-Setups verwenden. Nutzung ausdrücklich auf eigenes Risiko!

1) PHP-Datei: breadcrumbs.php

<?php
/**
 * Breadcrumbs – Public Domain (Unlicense)
 * Du darfst diesen Code ohne Einschränkungen nutzen, ändern und weitergeben.
 *
 * Nutzung:
 *  - include_once __DIR__ . '/breadcrumbs.php';
 *  - echo render_breadcrumbs([...]);
 */

/**
 * Standard: Segment-Name hübsch formatieren (slug -> Titel)
 */
function bc_pretty_label(string $segment): string
{
    // Query/Fragment entfernen
    $segment = preg_replace('~[?#].*$~', '', $segment);

    // Dateiendungen entfernen (html, php, etc.)
    $segment = preg_replace('~\.(html?|php|aspx?)$~i', '', $segment);

    // Bindestriche/Underscores zu Leerzeichen
    $segment = str_replace(['-', '_'], ' ', $segment);

    // Mehrfache Leerzeichen zusammenfassen
    $segment = preg_replace('~\s+~', ' ', trim($segment));

    // Umlaute/UTF-8: mb_* nutzen, falls verfügbar
    if (function_exists('mb_convert_case')) {
        return mb_convert_case($segment, MB_CASE_TITLE, 'UTF-8');
    }
    return ucwords($segment);
}

/**
 * Aktuellen Request-Pfad robust ermitteln (ohne Domain)
 */
function bc_current_path(): string
{
    $uri = $_SERVER['REQUEST_URI'] ?? '/';
    // Nur Pfadteil, ohne Querystring
    $path = parse_url($uri, PHP_URL_PATH) ?? '/';

    // Doppelte Slashes entfernen
    $path = preg_replace('~/{2,}~', '/', $path);

    // trailing slash beibehalten? Für Breadcrumbs meist egal, wir normalisieren:
    $path = rtrim($path, '/');
    return $path === '' ? '/' : $path;
}

/**
 * Breadcrumb-HTML rendern
 *
 * Optionen:
 *  - home_label: Text für Startseite
 *  - home_url: URL der Startseite
 *  - separator: Trennzeichen (reiner Text)
 *  - container_class: CSS-Klasse des nav
 *  - list_class: CSS-Klasse des ol
 *  - item_class: CSS-Klasse der li
 *  - active_class: CSS-Klasse für letztes Element
 *  - label_map: Assoziatives Array 'segment' => 'Titel'
 *  - skip_segments: Array mit Segmenten, die übersprungen werden sollen (z.B. 'index.php')
 *  - base_path: Falls Dein Projekt in einem Unterordner läuft (z.B. '/meinprojekt')
 *  - include_file_label: Wenn true, wird eine Datei (z.B. page.html) als letztes Element berücksichtigt
 */
function render_breadcrumbs(array $opts = []): string
{
    $defaults = [
        'home_label'        => 'Startseite',
        'home_url'          => '/',
        'separator'         => '→',
        'container_class'   => 'breadcrumbs',
        'list_class'        => 'breadcrumbs__list',
        'item_class'        => 'breadcrumbs__item',
        'active_class'      => 'is-active',
        'label_map'         => [],
        'skip_segments'     => ['index.php', 'index.html', 'index.htm'],
        'base_path'         => '',  // z.B. '/meinprojekt'
        'include_file_label'=> true,
    ];
    $o = array_merge($defaults, $opts);

    $path = bc_current_path();

    // base_path abziehen, falls gesetzt (z.B. Projekt läuft unter /meinprojekt)
    if (!empty($o['base_path']) && $o['base_path'] !== '/') {
        $bp = rtrim($o['base_path'], '/');
        if ($bp !== '' && strpos($path, $bp) === 0) {
            $path = substr($path, strlen($bp));
            $path = $path === '' ? '/' : $path;
        }
    }

    if ($path === '/' || $path === '') {
        // Auf Startseite keine Breadcrumbs oder nur Startseite – Du kannst das Verhalten hier ändern
        return '';
    }

    $segments = array_values(array_filter(explode('/', trim($path, '/')), 'strlen'));

    // Optional: Wenn letzte Komponente eine Datei ist, kann man sie anzeigen oder ausblenden
    if (!$o['include_file_label'] && !empty($segments)) {
        $last = end($segments);
        if (preg_match('~\.[a-z0-9]{2,5}$~i', $last)) {
            array_pop($segments);
        }
    }

    // Skip-Segmente entfernen
    $segments = array_values(array_filter($segments, function ($seg) use ($o) {
        return !in_array($seg, $o['skip_segments'], true);
    }));

    if (empty($segments)) {
        return '';
    }

    $items = [];

    // Home
    $homeUrl = $o['home_url'];
    if (!empty($o['base_path']) && $o['base_path'] !== '/') {
        $homeUrl = rtrim($o['base_path'], '/') . '/';
    }
    $items[] = [
        'label' => $o['home_label'],
        'url'   => $homeUrl,
        'active'=> false
    ];

    // Aufbau der URLs pro Segment
    $accum = '';
    $count = count($segments);
    for ($i = 0; $i < $count; $i++) {
        $seg = $segments[$i];
        $accum .= '/' . $seg;

        // URL (mit base_path)
        $url = $accum;
        if (!empty($o['base_path']) && $o['base_path'] !== '/') {
            $url = rtrim($o['base_path'], '/') . $accum;
        }

        $isLast = ($i === $count - 1);

        // Label: Map bevorzugen, sonst automatisch
        $label = $o['label_map'][$seg] ?? bc_pretty_label($seg);

        $items[] = [
            'label' => $label,
            'url'   => $url,
            'active'=> $isLast
        ];
    }

    // HTML ausgeben (ARIA + geordnete Liste)
    $sep = ' <span class="breadcrumbs__sep" aria-hidden="true">' . htmlspecialchars($o['separator'], ENT_QUOTES, 'UTF-8') . '</span> ';

    $html  = '<nav class="' . htmlspecialchars($o['container_class'], ENT_QUOTES, 'UTF-8') . '" aria-label="Breadcrumbs">';
    $html .= '<ol class="' . htmlspecialchars($o['list_class'], ENT_QUOTES, 'UTF-8') . '">';

    $total = count($items);
    for ($i = 0; $i < $total; $i++) {
        $it = $items[$i];
        $classes = $o['item_class'] . ($it['active'] ? ' ' . $o['active_class'] : '');

        $html .= '<li class="' . htmlspecialchars($classes, ENT_QUOTES, 'UTF-8') . '">';

        if ($it['active']) {
            $html .= '<span aria-current="page">' . htmlspecialchars($it['label'], ENT_QUOTES, 'UTF-8') . '</span>';
        } else {
            $html .= '<a href="' . htmlspecialchars($it['url'], ENT_QUOTES, 'UTF-8') . '">' . htmlspecialchars($it['label'], ENT_QUOTES, 'UTF-8') . '</a>';
        }

        $html .= '</li>';

        if ($i < $total - 1) {
            $html .= '<li class="breadcrumbs__sep-item" aria-hidden="true">' . $sep . '</li>';
        }
    }

    $html .= '</ol></nav>';
    return $html;
}

2) Einbindung in Deine Seite (Beispiel)

In jeder PHP-Seite (oder im Template-Header):

<?php
include_once __DIR__ . '/breadcrumbs.php';

echo render_breadcrumbs([
    'home_label' => 'Start',
    'home_url'   => '/', // oder '/index.php'
    'separator'  => '→',

    // Optional: Wenn Dein Projekt in /web/ liegt:
    // 'base_path' => '/web',

    // Optional: einzelne Segmente schöner benennen:
    'label_map'  => [
        'urlaub'   => 'Urlaub',
        'spanien'  => 'Spanien',
        'mallorca' => 'Mallorca',
    ],
]);
?>

3) Minimal-CSS (optional, aber empfohlen)

.breadcrumbs { font-size: 0.95rem; }
.breadcrumbs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.breadcrumbs__item a { text-decoration: none; }
.breadcrumbs__item.is-active { font-weight: 600; }
.breadcrumbs__sep-item { display: flex; align-items: center; }

Hinweise zur Praxis

  • Wenn Du sprechende URLs nutzt (z. B. /ratgeber/seo/breadcrumbs/), werden die Segmente sauber erkannt.
  • Wenn Du Dateinamen nutzt (/seo/breadcrumbs.php), wird auch das letzte Element korrekt als „Breadcrumbs“ angezeigt (Dateiendung wird entfernt).
  • Mit base_path kannst Du Installationen in Unterordnern sauber abbilden (z. B. /projektname).
  • Mit label_map kannst Du sehr gezielt einzelne Segmente „übersetzen“ oder schöner benennen.

Breadcrumb-Navigation für WordPress

Wenn Du WordPress nutzt, musst Du keine eigene Lösung programmieren. Es gibt zahlreiche WordPress-Plugins, mit denen Du Breadcrumb-Navigationen schnell und sauber integrieren kannst – auch ohne Programmierkenntnisse.

WordPress-Plugins für Breadcrumb-Navigationen

Link zum AnbieterBeschreibung des Angebots
https://de.wordpress.org/plugins/bread-crumb-matching-any-theme-skin/Breadcrumb-Navigation auf Basis der URL-Struktur
https://de.wordpress.org/plugins/breadcrumbSchlankes, leichtgewichtiges Breadcrumb-Plugin
https://de.wordpress.org/plugins/breadcrumb-block/Gutenberg-Block, WooCommerce-kompatibel
https://de.wordpress.org/plugins/breadcrumb-navxt/Sehr umfangreiches und SEO-freundliches Plugin
https://de.wordpress.org/plugins/breadcrumb-tmc/Einfaches Plugin für klassische Themes
https://de.wordpress.org/plugins/catch-breadcrumb/Flexibel konfigurierbare Breadcrumb-Lösung
https://de.wordpress.org/plugins/flexy-breadcrumb/Modernes Plugin mit Anpassungsmöglichkeiten
https://de.wordpress.org/plugins/woocommerce-breadcrumbs/Speziell für WooCommerce-Shops

Alle Plugins sind kostenlos über das offizielle WordPress-Pluginverzeichnis verfügbar.

Breadcrumb-Navigation mit CSS (manuell)

Für sehr kleine Webseiten oder spezielle Layouts kannst Du eine Breadcrumb-Navigation auch manuell mit HTML und CSS erstellen.

Eine anschauliche Anleitung mit Beispielcode findest Du bei W3Schools:
https://www.w3schools.com/howto/howto_css_breadcrumbs.asp

Diese Lösung ist statisch und eignet sich vor allem für einfache Seiten ohne komplexe Struktur.

SEO-Tipps für Breadcrumb-Navigationen

  • verwende sprechende URLs
  • integriere strukturierte Daten (Schema.org / BreadcrumbList)
  • vermeide doppelte Breadcrumb-Pfade
  • setze klare Trennzeichen (z. B. „→“ oder „/“)
  • achte auf konsistente interne Verlinkung



Diese Unterseite / Rubrik wurde zuletzt aktualisiert am 3. Januar 2026

User online: