Breadcrumbs
Helfen Sie den Nutzern bei der Orientierung und verbessern Sie mühelos die Suchmaschinenoptimierung.
Die Breadcrumbs-Komponente ist eine leistungsstarke Navigationshilfe, die Nutzern hilft, ihre aktuelle Position innerhalb der Hierarchie Ihrer Website zu verstehen. Sie bietet anklickbare Pfad-Links, die automatisch auf der Grundlage des Routings Ihrer Website generiert werden, was die Navigation intuitiv macht und die Nutzererfahrung verbessert.
Neben der Benutzerfreundlichkeit tragen Breadcrumbs auch zu einer besseren Suchmaschinenoptimierung bei, indem sie strukturierte Daten generieren, die Suchmaschinen helfen, Ihre Inhaltshierarchie zu interpretieren. Durch die vollständige Kontrolle über Aussehen und Verhalten können Sie die Breadcrumbs an Ihre Design- und Leistungsziele anpassen.
Bessere UX & Klarheit
Verschiedene Breadcrumb Trail Optionen.
Visuelle Unklarheit vermeiden.Routenabhängige Navigation.
Wird dynamisch für Benutzer aktualisiert.Gebrandete, mehrsprachige Origin Elemente.
Anpassbar für globale Zielgruppen.
Eingebautes SEO-Boosting
Schema-Markup wird automatisch hinzugefügt.
Verbessert Sichtbarkeit in Suchergebnissen.Styling für alle Breadcrumb-Teile setzbar.
Trennzeichen, aktive/inaktive Stile und mehr.Standardmäßig Themeorientiert..
Unterstützt vollständiges Theming.
Anwendungsfälle
Breadcrumbs sind besonders nützlich für:
Inhaltslastige Websites mit mehreren Ebenen (z. B. Blogs, Shops, Verzeichnisse)
Produkt-Detailseiten oder verschachtelte Kategorie-Strukturen
Verbesserung der SEO mit automatisierten strukturierten Daten
Verbesserung der Nutzerorientierung und Reduzierung der Absprungraten
Schnelle Navigation zurück in den Seitenbaum
Individuelles visuelles Design, wo Markenkonsistenz wichtig ist
Ganz gleich, ob Sie eine minimalistische Navigation oder eine markenbezogene, strukturierte Anleitung wünschen, Breadcrumbs bietet Ihren Nutzern die nötige Klarheit und Ihrer Website die SEO-Vorteile, die sie verdient.
Konfigurationsoptionen und Funktionen
Mit Breadcrumbs ermöglichen Sie eine intuitive Benutzerführung, verringern die Absprungrate und erhöhen die Verständlichkeit der Website, während Sie gleichzeitig die technische SEO durch strukturiertes Markup verbessern. Sie sind vollständig thematisierbar, dynamisch und innovativ und sind der stille UX- und SEO-Held, den jedes Projekt braucht.
Anzeige Typ
Legt fest, wie viel von der Route angezeigt wird:
Vollständiger Pfad - zeigt jeden Teil der aktuellen Route an (z. B. Home > Produkte > Schuhe > Turnschuhe)
Übergeordneter Pfad > Aktuell - vereinfacht den Pfad, indem nur die unmittelbar übergeordnete und die aktuelle Seite angezeigt werden
Hilfreich, um ein Gleichgewicht zwischen visueller Klarheit und Benutzerfreundlichkeit herzustellen, insbesondere bei tief verschachtelten Seiten.
Ursprungs-Route-Ebene
Legt die Anfangstiefe der Breadcrumbs fest (Standard ist 0, d.h. die Wurzel).
Sie können dies anpassen, um die Breadcrumbs auf einer tieferen Ebene zu starten, was ideal für Anwendungsfälle wie Produktseiten (z. B. /product-x) oder Shops (z. B. /shop) ist.
Ursprungs-Element
Sie können einen benutzerdefinierten Startpunkt festlegen, in der Regel Ihre Homepage oder die Anfangsseite eines Produkts oder Shops, der Ihr Markenlogo oder ein bestimmtes Produkt-Branding beinhaltet.
Vollständig übersetzbar und mit anderen Komponenten anpassbar, ermöglicht es mehrsprachige Breadcrumb-Startpunkte als nur "Home".
Separator
Visuelles Trennzeichen zwischen Breadcrumb-Elementen.
Kann ein Textsymbol (z. B. "/"), SVG oder ein Bild sein.
Unterstützt vollständiges Styling und Anpassungen.
Komponenten Theme
Gilt für den gesamten Wrapper der Breadcrumb-Komponente.
Steuert die äußeren Abstände, Ränder und den Hintergrund, falls erforderlich.
Content Theme
Das Theme wird auf den Listencontainer der Breadcrumb-Links angewendet.
Legt das Layout, die Abstände und das Verhalten des internen Containers fest.
Element Theme
Wird auf jedes Breadcrumb-Link-Element angewandt, um ein einheitliches visuelles Design über den gesamten Pfad zu erhalten.
Aktives Element Theme
Stil für den aktuellen Routenpunkt im Breadcrumb-Pfad.
Verwenden Sie diese Option, um sie hervorzuheben oder zu deaktivieren, je nach Ihrem Design.
Inaktives Element Theme
Theme für alle inaktiven Breadcrumb-Links.
Normalerweise sind sie im Vergleich zum aktiven Element unterstrichen oder gedämpft.