Breadcrumb als Flugroute
Jede Ebene ist ein Flughafen, verbunden durch Flugbögen; ein Klick lässt das Flugzeug die Route dorthin fliegen und den Abschnitt einfärben.
Einstellungen
Code
<nav class="uvq12-fp" aria-label="Brotkrümelnavigation"><svg viewBox="0 0 320 130" aria-hidden="true"><path class="b" d="M26 98 Q61 28 96 72 Q131 28 166 94 Q201 16 236 60 Q267 16 298 84"/><path class="f" d="M26 98 Q61 28 96 72 Q131 28 166 94 Q201 16 236 60 Q267 16 298 84" style="stroke-dasharray:381.6 9999"/><g class="pl" transform="translate(298 84) rotate(110)"><circle r="16" class="sh"/><path transform="scale(1.15) translate(-12 -12)" d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></g></svg><ol><li style="left:8.13%;top:75.38%"><a href="#" data-l="0"><i aria-hidden="true"></i><span>Start</span></a></li><li style="left:30.00%;top:55.38%"><a href="#" data-l="96.6"><i aria-hidden="true"></i><span>Reiseziele</span></a></li><li style="left:51.88%;top:72.31%"><a href="#" data-l="191.1"><i aria-hidden="true"></i><span>Europa</span></a></li><li style="left:73.75%;top:46.15%"><a href="#" data-l="292.1"><i aria-hidden="true"></i><span>Portugal</span></a></li><li style="left:93.13%;top:64.62%"><a href="#" data-l="381.6" aria-current="page"><i aria-hidden="true"></i><span>Lissabon</span></a></li></ol></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
Ein Breadcrumb als Flugkarte: Jede Ebene ist ein Flughafen auf einem hellen Raster, verbunden durch gestrichelte Bögen wie die Routen im Bordmagazin. Ein Klick auf eine Ebene lässt das Flugzeug die Kurven entlang dorthin fliegen und sich in jedem Bogen drehen, während der geflogene Teil durchgezogen wird. Ebenen nach der aktuellen bleiben grau. Passend für Reiseseiten, Shops und tiefe Kataloge.
Die Hauptfarbe bestimmt Route und aktuelles Label, die Zweitfarbe das Flugzeug. Ändere die Namen in den Daten und halte sie kurz, bei vier bis sechs Ebenen bleiben die Bögen gut lesbar.