Keyboard Navigation Demo
Interactive playground for keyboard-driven UX patterns
Command Palette
Press Ctrl+K (or ⌘+K) anywhere on the page to open the palette. Type to filter navigation items, use arrow keys to pick, Enter to confirm.
Search pages\u2026
List Navigation
A roving tabIndex pattern \u2014 the container is focusable, inner items use tabIndex=-1. Arrow keys move a virtual cursor; Enter/Space commit selection.
AAPL
Apple Inc.
189.30
+1.2%MSFT
Microsoft Corp.
415.50
+0.8%GOOGL
Alphabet Inc.
175.90
-0.3%AMZN
Amazon.com Inc.
198.10
+2.1%NVDA
NVIDIA Corp.
875.40
+3.5%META
Meta Platforms
524.60
+1.0%TSLA
Tesla Inc.
172.80
-1.4%BRK.B
Berkshire Hathaway
407.20
+0.4%Grid / Table Navigation
Two-dimensional navigation via arrow keys. Tab wraps to the next row. The active cell is tracked in state and styled visually \u2014 no DOM focus juggling needed for simple grids.
| Delta | Gamma | Vega | Theta | Rho | |
| 1W | +68.20 | -70.57 | +74.50 | -46.72 | +17.14 |
| 1M | +23.42 | -88.50 | -2.22 | +29.75 | -52.49 |
| 3M | -67.34 | -75.42 | +4.55 | +72.73 | -87.98 |
| 6M | -59.13 | -23.44 | -66.88 | -81.24 | -26.11 |
R1C1
1W / Delta+68.20
Shortcut Reference
Ctrl+B | Toggle sidebar |
Ctrl+K | Open command palette |
↑↓ | Move focus up / down |
Home | Jump to first item |
End | Jump to last item |
↵ | Select focused item |
Esc | Clear selection / close |
↑↓←→ | Move focus by one cell |
Tab | Advance to next cell (wraps row) |
Home | Jump to first column |
End | Jump to last column |
↑↓ | Navigate results |
↵ | Activate selected result |
Esc | Close palette |