Metro line breadcrumb
Each level is a station on a metro line, with tilted names and a “You are here” sign that travels when you click.
Settings
Code
<nav class="uvq12-mc" aria-label="Breadcrumb"><div class="ln"><ol><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Home</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">Men</span></a></li><li><a href="#"><span class="st" aria-hidden="true"></span><span class="nm">Sneakers</span></a></li><li><a href="#" aria-current="page"><span class="st" aria-hidden="true"></span><span class="nm">Running</span></a></li></ol><p class="ah" aria-hidden="true"><b>L5</b><span>You are here</span></p></div></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
This breadcrumb draws the path as a metro line: every level is a station, names lean at an angle like on a transit map, and stations after the current one turn grey and dashed. A yellow “You are here” sign rides along the line when you click a station. It uses a real ordered list of links with aria-current, so it works for shops, docs and deep folder structures.
Pick the line color with the main color and the sign with the secondary one. Keep names short so the tilted labels stay readable, and use four to six levels for the clearest map.