# Overview

> Live keyboard navigation examples for lists, grids, trees, menus and listboxes, each a working demo with the code that runs it.

Start with the [basic list](/docs/examples/basic). On every page,
<kbd class="kbd">Tab</kbd> into the demo or click it, then try the keys listed
with it.

## Lists

- [Basic list](/docs/examples/basic) — arrows, <kbd class="kbd">Home</kbd>,
  <kbd class="kbd">End</kbd> and the page keys on a plain list.
- [Looping lists](/docs/examples/looping-lists) — wrap from the last item to
  the first, and back.
- [Horizontal lists](/docs/examples/horizontal-lists) —
  <kbd class="kbd">←</kbd>/<kbd class="kbd">→</kbd> for toolbars and tab rows,
  following the text direction.
- [Custom keys](/docs/examples/custom-keys) — rebind a move, add modifiers, or
  switch a binding off.

## Grids

- [Grid](/docs/examples/grid) — move by cell, row, row ends, grid ends or pages.
- [Responsive grid](/docs/examples/responsive-grid) — read the column count
  from CSS on every keypress.

## Tab stops and focus

- [Roving tabindex](/docs/examples/roving-tabindex) — one tab stop per group,
  following focus.
- [Skipped items](/docs/examples/skipped-items) — pass over headings and
  disabled items.
- [Nested roots](/docs/examples/nested-roots) — inner groups with their own
  keys, and a way back out.
- [Focus keys](/docs/examples/focus-keys) — shortcuts that focus an item or
  panel from anywhere under the listener.
- [Editable targets](/docs/examples/editable-targets) — text fields and
  sliders keep their own keys.

## Widgets

- [Typeahead](/docs/examples/typeahead) — focus an item by typing its label.
- [Tree view](/docs/examples/tree-view) — navigate visible rows while your
  code opens and closes branches.
- [Options in JavaScript](/docs/examples/javascript-options) — a menu
  configured without changing its markup.
- [Listbox](/docs/examples/listbox) — navigation, typeahead, roving tabindex
  and selection in one widget.