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

* Default focus moving behavior

* Various overflow regions

* Scrollable region

* <iframe> element

* <input> elements

* Spatial navigation container

* Drawing board

3. Navigation event

* Prevent default navigation event

4. API

* getSpatialNavigationContainer()

* focusableAreas(optional focusableAreasOptions)

* spatialNavigationSearch()

5. Controlling spatial navigation through declarative means

* Spatial navigation action

6. Web applications demo

* Blog app

* Calender app