Breadcrumb als U-Bahn-Linie
Jede Ebene ist eine Station einer U-Bahn-Linie, mit schrägen Namen und einem „Sie sind hier“-Schild, das beim Klick mitfährt.
Einstellungen
Code
<nav class="uvq12-mc" aria-label="Brotkrümelnavigation"><div class="ln"><ol><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Start</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Shop</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Herren</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Sneaker</span></a></li><li><a href="#" aria-current="page"><span class="st" aria-hidden="true"></span><span class="nm">Laufen</span></a></li></ol><p class="ah" aria-hidden="true"><b>L5</b><span>Du bist hier</span></p></div></nav>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Dieser Breadcrumb zeichnet den Pfad als U-Bahn-Linie: Jede Ebene ist eine Station, die Namen stehen schräg wie auf einem Netzplan, und Stationen nach der aktuellen werden grau und gestrichelt. Ein gelbes Schild mit „Sie sind hier“ fährt beim Klick die Linie entlang. Es ist eine echte geordnete Linkliste mit aria-current und passt zu Shops, Dokus und tiefen Ordnerstrukturen.
Die Hauptfarbe bestimmt die Linie, die Zweitfarbe das Schild. Halte die Namen kurz, damit die schrägen Beschriftungen lesbar bleiben, und nutze vier bis sechs Ebenen für den klarsten Plan.