Erstellen Sie schöne CSS-Breadcrumbs mit Live-Vorschau. Generieren Sie Breadcrumbs mit mehreren Stilen, Trennzeichen und anpassbaren Farben — alles mit kopierbarem CSS-Code.
Der CSS Breadcrumb Generator ist ein kostenloses Online-Tool, das schöne Breadcrumb-Navigationskomponenten mit reinem CSS erstellt. Wählen Sie aus mehreren Stilen einschließlich Standard, Pfeil, Pille, Unterstrichen und Minimal. Passen Sie Trennzeichentypen, Farben, Eckenradius und Hover-Effekte an. Jeder Breadcrumb wird mit sauberem, kopierbereitem CSS-Code generiert, der in allen modernen Browsern funktioniert. Keine JavaScript-Bibliotheken erforderlich.
Alle Breadcrumbs verwenden standardmäßige CSS3-Eigenschaften, die von modernen Browsern unterstützt werden (Chrome, Firefox, Safari, Edge). Flexbox wird für das Layout verwendet, das in allen aktuellen Browsern gut unterstützt wird.
Ja! Der Generator erstellt eine Vorlage mit Ihrer gewählten Anzahl von Elementen. Fügen Sie einfach weitere `<li>`-Elemente zum HTML hinzu, um zusätzliche Breadcrumb-Ebenen einzuschließen.
Das generierte HTML verwendet semantische `<nav>`- und `<ol>`-Elemente mit entsprechenden ARIA-Labels, was Breadcrumbs für Screenreader und Hilfstechnologien zugänglich macht.
Der Generator bietet textbasierte Trennzeichen. Um Icon-Schriftarten oder SVG-Trennzeichen zu verwenden, ersetzen Sie die `content`-Eigenschaft im `::before`-Pseudo-Element durch Ihr Icon-Schriftarten-Zeichen oder verwenden Sie ein Hintergrundbild.