Menü aus Flugverkehrs-Kontrollstreifen
Die Bereiche sind Kontrollstreifen in der Halterung eines Towers: Der gewählte rückt aus der Reihe, so wie es Fluglotsen tun.
Einstellungen
Code
<nav class="uvq12-at" aria-label="Kontrollturm"><p class="hd" aria-hidden="true"><span>Kontrollturm</span><span>RWY 36L</span></p><ol><li><a href="#" style="--c:#fde68a" aria-current="page"><span class="cs" aria-hidden="true"><b>IBE3141</b><small>A320</small></span><span class="nm">Übersicht</span><span class="rt" aria-hidden="true">MAD LIS</span></a></li><li><a href="#" style="--c:#bfdbfe"><span class="cs" aria-hidden="true"><b>VLG7012</b><small>A321</small></span><span class="nm">Flüge</span><span class="rt" aria-hidden="true">BCN ORY</span></a></li><li><a href="#" style="--c:#fecaca"><span class="cs" aria-hidden="true"><b>AEA1024</b><small>B738</small></span><span class="nm">Passagiere</span><span class="rt" aria-hidden="true">PMI MAD</span></a></li><li><a href="#" style="--c:#bbf7d0"><span class="cs" aria-hidden="true"><b>RYR4410</b><small>B38M</small></span><span class="nm">Gepäck</span><span class="rt" aria-hidden="true">AGP STN</span></a></li><li><a href="#" style="--c:#e9d5ff"><span class="cs" aria-hidden="true"><b>TAP1013</b><small>A20N</small></span><span class="nm">Berichte</span><span class="rt" aria-hidden="true">LIS OPO</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 senkrechtes Menü nach dem Vorbild der Papierstreifen, die Fluglotsen in einer Halterung aufreihen. Jeder Bereich ist ein farbiger Streifen mit Rufzeichen, Flugzeugtyp und Route in Monospace, und der gewählte rückt mit einer roten Markierung aus der Reihe, so wie ein Lotse den Flug markiert, den er gerade betreut. Pfeiltasten wechseln den Streifen. Passend für Dashboards, Logistik-Tools und Adminbereiche.
Die Hauptfarbe bestimmt die aktive Markierung, die Zweitfarbe das Metall der Halterung. Gib jedem Streifen in den Daten eine eigene Papierfarbe und lass die Codes als Dekor neben einem klaren Bereichsnamen stehen.