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 | +10.27 | -47.32 | +83.22 | -34.18 | -3.27 |
| 1M | -72.83 | +89.66 | +57.87 | +92.15 | +79.89 |
| 3M | -67.32 | +8.76 | -68.25 | -96.95 | +21.29 |
| 6M | -51.26 | +8.15 | +42.31 | +64.14 | +82.14 |
R1C1
1W / Delta+10.27
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 |