Flight route breadcrumb
Each level is an airport joined by flight arcs; click one and the plane flies the route there, painting the stretch already flown.
Settings
Code
<nav class="uvq12-fp" aria-label="Breadcrumb"><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>Home</span></a></li><li style="left:30.00%;top:55.38%"><a href="#" data-l="96.6"><i aria-hidden="true"></i><span>Destinations</span></a></li><li style="left:51.88%;top:72.31%"><a href="#" data-l="191.1"><i aria-hidden="true"></i><span>Europe</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>Lisbon</span></a></li></ol></nav>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
A breadcrumb drawn as a flight map: every level is an airport on a light grid, joined by dashed arcs like the routes in an airline magazine. Clicking a level makes the plane fly along the curves to it, turning with each arc, while the flown part of the route turns solid. Levels after the current one stay grey. It suits travel sites, shops and deep catalogues.
The main color sets the route and the current label, the secondary color the plane. Change the names in the data and keep them short, between four and six levels, so the arcs stay readable.