DevPanicZone Logo DevPanicZone! Cheatsheets.

Hero Breadcrumbs

Automatisierte Brotkrumen-Navigation

Hero Breadcrumbs

Breadcrumbs (Brotkrumen-Navigation) zeigen den Pfad zur aktuellen Seite. Sie werden automatisch durch generate-navigation.js generiert und helfen bei der Orientierung.

HTML-Struktur

Die Breadcrumbs werden in der Hero-Section platziert. Das Script sucht nach dem <nav class="breadcrumbs"> Element und ersetzt dessen Inhalt:

HTML 
<section class="hero tutorial-hero">
    <div class="container">
        <!-- Breadcrumbs werden hier automatisch gefüllt -->
        <nav class="breadcrumbs" aria-label="Breadcrumb"></nav>
        
        <h1 class="hero-title">Seitentitel</h1>
        <p class="hero-subtitle">Untertitel</p>
    </div>
</section>

Zwei Varianten

Das Script generiert je nach Seitentyp unterschiedliche Breadcrumbs:

Kategorieseiten (index.html)

Pfad: /tutorials/css/index.html

Ergebnis: Home › CSS

Tutorial-Seiten

Pfad: /tutorials/css/css-basics/css-einbinden.html

Ergebnis: Home › CSS › CSS einbinden

Hinweis

Die Unterkategorie (z.B. "CSS Basics") wird nicht in den Breadcrumbs angezeigt. Die Navigation bleibt dadurch kompakt: Home → Hauptkategorie → aktuelles Tutorial.

Beispiel: Generierte Breadcrumbs

Kategorieseite

Für /tutorials/css/index.html:

HTML 
<nav class="breadcrumbs" aria-label="Breadcrumb">
    <a href="/" class="breadcrumb-link">Home</a>
    <span class="breadcrumb-separator">›</span>
    <span class="breadcrumb-current">CSS</span>
</nav>

Tutorial-Seite

Für /tutorials/css/css-basics/css-einbinden.html:

HTML 
<nav class="breadcrumbs" aria-label="Breadcrumb">
    <a href="/" class="breadcrumb-link">Home</a>
    <span class="breadcrumb-separator">›</span>
    <a href="/tutorials/css/" class="breadcrumb-link">CSS</a>
    <span class="breadcrumb-separator">›</span>
    <span class="breadcrumb-current">CSS einbinden</span>
</nav>

Wie funktioniert's?

Die Funktion generateBreadcrumbs() nutzt zwei Informationen:

  1. Kategorie aus dem Dateipfad via getCategoryFromPath()
  2. Kategorie-Name aus CATEGORY_NAMES
  3. Tutorial-Titel aus CUSTOM_TITLES oder der H1-Überschrift
JavaScript 
function generateBreadcrumbs(filePath, currentTitle) {
    const category = getCategoryFromPath(filePath);
    const categoryName = CATEGORY_NAMES[category] || category;
    const basename = path.basename(filePath);

    // Für Kategorieseiten (index.html): nur Home › Kategorie
    if (basename === 'index.html') {
        return `<a href="/" class="breadcrumb-link">Home</a>` +
               `<span class="breadcrumb-separator">›</span>` +
               `<span class="breadcrumb-current">${categoryName}</span>`;
    }

    // Für Tutorial-Seiten: Home › Kategorie › Tutorial
    return `<a href="/" class="breadcrumb-link">Home</a>` +
           `<span class="breadcrumb-separator">›</span>` +
           `<a href="/tutorials/${category}/" class="breadcrumb-link">${categoryName}</a>` +
           `<span class="breadcrumb-separator">›</span>` +
           `<span class="breadcrumb-current">${currentTitle}</span>`;
}

Kategorie-Namen aus CATEGORY_NAMES

Die Anzeigenamen der Kategorien werden aus der CATEGORY_NAMES Konfiguration geholt:

JavaScript 
const CATEGORY_NAMES = {
    'html': 'HTML',
    'css': 'CSS',
    'bootstrap': 'Bootstrap',
    'javascript': 'JavaScript',
    'php': 'PHP',
    'misc': 'Verschiedenes',
    'devpaniczone': 'DevPanicZone!'
};

Beispiele:

  • Ordner css → Anzeige CSS
  • Ordner javascript → Anzeige JavaScript
  • Ordner misc → Anzeige Verschiedenes
  • Ordner devpaniczone → Anzeige DevPanicZone!

Tutorial-Titel aus CUSTOM_TITLES oder H1

Der Titel des aktuellen Tutorials (letztes Breadcrumb-Element) wird so ermittelt:

  1. Prüfe ob ein Eintrag in CUSTOM_TITLES existiert
  2. Falls nicht: Extrahiere den Text aus der <h1> Überschrift
JavaScript 
// Custom Titles (überschreibt H1 aus HTML)
const CUSTOM_TITLES = {
    'css-einbinden.html': 'CSS einbinden',
    'css-color-units.html': 'CSS Farben & Einheiten',
    'html-grundgeruest.html': 'HTML Grundgerüst',
    // ...
};

// Im Code:
const currentTitle = CUSTOM_TITLES[basename] || extractTitle(html);
Wann CUSTOM_TITLES nutzen?
  • Wenn die H1 zu lang ist für die Navigation
  • Wenn du eine andere Schreibweise bevorzugst (z.B. "CSS einbinden" statt "CSS Einbinden")
  • Wenn die H1 Sonderzeichen enthält, die problematisch sein könnten

CSS-Klassen

Die Breadcrumbs nutzen folgende CSS-Klassen:

  • .breadcrumbs → Container (nav-Element)
  • .breadcrumb-link → Klickbare Links
  • .breadcrumb-separator → Trennzeichen (›)
  • .breadcrumb-current → Aktuelle Seite (nicht klickbar)

Neue Kategorie hinzufügen

Um eine neue Kategorie in den Breadcrumbs anzuzeigen:

  1. Füge die Kategorie zu CATEGORY_NAMES hinzu
  2. Führe npm run build aus
JavaScript 
const CATEGORY_NAMES = {
    'html': 'HTML',
    'css': 'CSS',
    // ...
    'react': 'React',  // ← Neue Kategorie
};

Die Breadcrumbs nutzen dieselbe CATEGORY_NAMES Konfiguration wie die Main Navigation – eine Änderung wirkt sich auf beide aus.

Ausführen

Nach Änderungen an der Konfiguration:

Bash 
npm run build

Mehr aus DevPanicZone!

Tutorials werden geladen...