Revolving door menu
A revolving door seen from above: push it and it spins with inertia until a section faces the entrance.
Settings
Code
<div class="uvq12-rv"><div class="dr"><svg viewBox="0 0 200 200" aria-hidden="true"><circle class="fl" cx="100" cy="100" r="80"/><path class="wl" d="M60 169.3A80 80 0 0 1 60 30.7M140 30.7A80 80 0 0 1 140 169.3"/><rect class="mt" x="66" y="186" width="68" height="9" rx="3"/><g class="ro"><path d="M100 100L155.2 44.8M100 100L44.8 44.8M100 100L44.8 155.2M100 100L155.2 155.2"/><circle cx="100" cy="100" r="7"/></g></svg><div role="tablist" aria-label="Building"><button type="button" role="tab" id="uvq12-rv-t0" aria-selected="true" aria-controls="uvq12-rv-p0" tabindex="0" style="left:50.00%;top:73.00%">Reception</button><button type="button" role="tab" id="uvq12-rv-t1" aria-selected="false" aria-controls="uvq12-rv-p1" tabindex="-1" style="left:27.00%;top:50.00%">Offices</button><button type="button" role="tab" id="uvq12-rv-t2" aria-selected="false" aria-controls="uvq12-rv-p2" tabindex="-1" style="left:50.00%;top:27.00%">Terrace</button><button type="button" role="tab" id="uvq12-rv-t3" aria-selected="false" aria-controls="uvq12-rv-p3" tabindex="-1" style="left:73.00%;top:50.00%">Auditorium</button></div></div><div class="in"><div class="pn" role="tabpanel" id="uvq12-rv-p0" aria-labelledby="uvq12-rv-t0"><b>Reception</b><span>Ground floor, open 8 am to 8 pm.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p1" aria-labelledby="uvq12-rv-t1" hidden><b>Offices</b><span>Flexible desks on floors 1 to 6.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p2" aria-labelledby="uvq12-rv-t2" hidden><b>Terrace</b><span>River views and coffee outdoors.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p3" aria-labelledby="uvq12-rv-t3" hidden><b>Auditorium</b><span>Two hundred seats for talks and premieres.</span></div></div></div>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
A menu drawn as a revolving door seen from above, with curved walls, glass wings and a mat at the entrance. Each quarter holds a section, and the one that ends up facing the entrance is the active one. Push the door with a finger or the mouse and it keeps turning with inertia before snapping into place, or use the wheel, arrow keys or a click on any name.
The main color tints the glass wings and the active label, the secondary color the walls. Four sections match the four wings; write a short description for each so the panel beside the door explains it.