Aufklappende Insel-Navigation
Eine schwebende Pille mit Logo, die sich wie eine Dynamic Island öffnet und große Menülinks zeigt.
Einstellungen
Code
<nav class="uv-nis" aria-label="Hauptmenü"><div class="is"><div class="hd"><span class="lg"><i></i>Estudio Nube</span><button type="button" aria-expanded="false" aria-controls="uv-nis-l"><span class="a">Menü</span><span class="b">Schließen</span></button></div><ul id="uv-nis-l"><li style="--i:0"><a href="#">Projekte<span>01</span></a></li><li style="--i:1"><a href="#">Leistungen<span>02</span></a></li><li style="--i:2"><a href="#">Studio<span>03</span></a></li><li style="--i:3"><a href="#">Kontakt<span>04</span></a></li></ul></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
Studios und Portfolios lieben eine Navigation, die fast unsichtbar bleibt, bis man sie braucht. Diese dunkle Pille schwebt oben mit leuchtendem Punkt, Markenname und Menü-Button. Ein Druck lässt sie weich zu einem großen abgerundeten Panel wachsen, der Button wird zu Schließen und vier übergroße Links gleiten nacheinander mit Nummer herein.
Die Links rücken beim Hover leicht zur Seite, der Button meldet aria-expanded, und Escape schließt die Insel und gibt den Fokus zurück. Die Marke änderst du im Textfeld, Panel- und Akzentfarbe mit den Farbreglern, die Links im HTML.