Mechanical keycap menu
Sections become keys on a beige mechanical keyboard: they sink when pressed, the active one turns orange and keys 1 to 4 work too.
Settings
Code
<div class="uvq12-kc"><div class="ks" role="tablist" aria-label="Shortcuts"><button type="button" role="tab" id="uvq12-kc-t0" aria-selected="true" aria-controls="uvq12-kc-p0" tabindex="0" aria-keyshortcuts="1"><span class="cap"><b>1</b><span>Home</span><i class="led" aria-hidden="true"></i></span></button><button type="button" role="tab" id="uvq12-kc-t1" aria-selected="false" aria-controls="uvq12-kc-p1" tabindex="-1" aria-keyshortcuts="2"><span class="cap"><b>2</b><span>Projects</span><i class="led" aria-hidden="true"></i></span></button><button type="button" role="tab" id="uvq12-kc-t2" aria-selected="false" aria-controls="uvq12-kc-p2" tabindex="-1" aria-keyshortcuts="3"><span class="cap"><b>3</b><span>Notes</span><i class="led" aria-hidden="true"></i></span></button><button type="button" role="tab" id="uvq12-kc-t3" aria-selected="false" aria-controls="uvq12-kc-p3" tabindex="-1" aria-keyshortcuts="4"><span class="cap"><b>4</b><span>Settings</span><i class="led" aria-hidden="true"></i></span></button></div><div class="sc"><div class="pn" role="tabpanel" id="uvq12-kc-p0" aria-labelledby="uvq12-kc-t0">You have 3 new alerts.</div><div class="pn" role="tabpanel" id="uvq12-kc-p1" aria-labelledby="uvq12-kc-t1" hidden>12 active projects.</div><div class="pn" role="tabpanel" id="uvq12-kc-p2" aria-labelledby="uvq12-kc-t2" hidden>Last note 5 min ago.</div><div class="pn" role="tabpanel" id="uvq12-kc-p3" aria-labelledby="uvq12-kc-t3" hidden>Theme, language and shortcuts.</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 made of beige mechanical keycaps with a dished top, number legend and a small LED. Keys travel down when pressed, the active section stays orange with its LED lit, and a little green terminal line below types out what is inside. Pressing 1 to 4 on the keyboard presses the matching cap, which makes it fun for developer tools, dashboards and portfolios.
The main color sets the active key and the secondary color the keyboard case. Use one short word per key, up to five keys in a row, and list the shortcuts somewhere visible.