This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.
Component <neo-navgroup> is a roving-tabindex keyboard navigation host. Arrow keys move focus across children marked data-neo-navgroup-item; Tab enters and leaves as a single stop. orientation picks the axis (horizontal, vertical, or 2D grid); columns fixes the grid column count; wrap opts into edge wrapping; typeahead opts into focus by printable key. No implicit ARIA role; author role and aria-label to fit the semantics.
This is keyboard navigation
Focus an item, then the arrow keys ←→↑↓ plus Home / End and typeahead. With a pointer the demos are just buttons; the behavior is only observable from the keyboard.
Default
Toolbar
Vertical
Grid
Media controls
DeactivateRenameDuplicateDelete
The preview routes through the in-browser server simulator. Its current Settings (network latency, a non-200 response, or an unreachable server) are in effect, so the live preview can look like it is misbehaving. Adjust them in the Settings panel.
New state Toggle autoplay
BIUS
HTMLCSS
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
A horizontal row of formatting buttons with wrap on, so arrow keys cycle past either edge. role="toolbar" and aria-label turn the group into a single labelled landmark for assistive tech.
Set orientation="grid" with a columns count and arrow keys move in two dimensions. wrap wraps both axes, so a Right at the end of a row jumps to the start of the next row.
Disabled items stay in place so the toolbar's visual order is preserved, but arrow keys skip over them: they're dropped from the roving focus set and can't be activated. Useful for media controls where the available actions change with playback state.