Elevator floor navigation
Each section is a floor: press its button and the lift counts floors on an LED display until it arrives with a flash.
Settings
Code
<nav class="uvq12-el" aria-label="Floors"><div class="ds" aria-live="polite"><span class="dr" aria-hidden="true"></span><b class="fn">0</b><span class="lb"><small>Floor</small><span class="nm">Reception</span></span></div><ul><li><button type="button" data-f="4"><span class="bt">4</span><span class="tx">Contact</span></button></li><li><button type="button" data-f="3"><span class="bt">3</span><span class="tx">Team</span></button></li><li><button type="button" data-f="2"><span class="bt">2</span><span class="tx">Blog</span></button></li><li><button type="button" data-f="1"><span class="bt">1</span><span class="tx">Shop</span></button></li><li><button type="button" data-f="0" aria-current="true"><span class="bt">0</span><span class="tx">Reception</span></button></li></ul></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
Site sections presented as the floors of a building, on a brushed steel elevator panel. Pressing a button lights its ring, the dot matrix display counts floor by floor with an arrow showing the direction, and a soft flash marks the arrival. Number keys call floors too. It is a playful way to present company sites, hotels, venues and multi-level guides.
The main color lights the display and the rings, the secondary color sets the steel. Rename floors in the data, and the travel time follows the speed slider so you can make the ride quicker.