Spatial Navigation Demo Collection

Spatial Navigation Laboratory

All demo pages support spatial navigation. Please use arrow keys for moving the focus. Spatial navigation polyfill is deactivated. Please use tab key for moving the focus.

This site aims to show several behaviors of spatial navigation using a polyfill.

Please use only arrow keys with several shortcuts to navigate all pages.

Submit bug reports, requests and comments on github issues.

1. Why spatial navigation?

Introduction of spatial navigation

2. Processing model

* Spatial navigation behavior by default

* Various overflow regions

* Scrollable region

* <iframe> element

* <input> elements

* Drawing board

3. Navigation event

* Prevent default navigation event

4. Javascript APIs

* getSpatialNavigationContainer()

* focusableAreas(optional focusableAreasOptions)

* spatialNavigationSearch()

* navigate(dir)

5. CSS Properties

6. Web applications demo

* Blog app