Expanding island navbar
A floating pill with the logo that opens like a dynamic island and reveals large menu links.
Settings
Code
<nav class="uv-nis" aria-label="Main"><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">Menu</span><span class="b">Close</span></button></div><ul id="uv-nis-l"><li style="--i:0"><a href="#">Projects<span>01</span></a></li><li style="--i:1"><a href="#">Services<span>02</span></a></li><li style="--i:2"><a href="#">Studio<span>03</span></a></li><li style="--i:3"><a href="#">Contact<span>04</span></a></li></ul></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
Studios and portfolios love a navigation that is almost invisible until needed. This dark pill floats at the top with a glowing dot, the brand name and a Menu button; pressing it grows the pill smoothly into a large rounded panel, the button text flips to Close and four oversized links slide in one after another with their index numbers.
The links nudge to the side on hover, the button reports aria-expanded and Escape closes the island and returns focus. Change the brand with the text control, the panel and accent colors with the two color controls, and the links in the HTML.