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. On every page, Tab into the demo or click it, then try the keys listed with it.

Lists#

• Basic list — arrows, Home, End and the page keys on a plain list.
• Looping lists — wrap from the last item to the first, and back.
• Horizontal lists — ←/→ for toolbars and tab rows, following the text direction.
• Custom keys — rebind a move, add modifiers, or switch a binding off.

Grids#

• Grid — move by cell, row, row ends, grid ends or pages.
• Responsive grid — read the column count from CSS on every keypress.

Tab stops and focus#

• Roving tabindex — one tab stop per group, following focus.
• Skipped items — pass over headings and disabled items.
• Nested roots — inner groups with their own keys, and a way back out.
• Focus keys — shortcuts that focus an item or panel from anywhere under the listener.
• Editable targets — text fields and sliders keep their own keys.

Widgets#

• Typeahead — focus an item by typing its label.
• Tree view — navigate visible rows while your code opens and closes branches.
• Options in JavaScript — a menu configured without changing its markup.
• Listbox — navigation, typeahead, roving tabindex and selection in one widget.