https://github.com/salute-developers/spatial-navigation
https://github.com/salute-developers/spatial-navigation
Last synced: 16 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/salute-developers/spatial-navigation
- Owner: salute-developers
- License: other
- Created: 2022-04-26T08:18:23.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-26T08:18:58.000Z (about 4 years ago)
- Last Synced: 2025-10-23T16:31:02.127Z (8 months ago)
- Language: JavaScript
- Size: 7.17 MB
- Stars: 2
- Watchers: 9
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Spatial Navigation
[](https://npm-stat.com/charts.html?package=spatial-navigation-polyfill)
[](https://www.npmjs.com/package/spatial-navigation-polyfill)
**Written**: 2017-10-17, **Updated**: 2019-11-27
This repository is for supportive tools of **Spatial Navigation** such as polyfill, demo, and relevant documents. The spatial navigation [spec](https://drafts.csswg.org/css-nav-1/) has been migrated from WICG to CSS WG as an official draft according to the [decision](https://www.w3.org/2018/10/23-css-minutes.html#item01) at the CSS WG meeting in TPAC 2018.
You can raise a spec issue in [CSS WG](https://github.com/w3c/csswg-drafts/labels/css-nav-1), but also raise others(polyfill, demo, ideas) in [WICG](https://github.com/WICG/spatial-navigation/issues) here.
## Overview
**Spatial navigation** is the ability to navigate between focusable elements based on their position within a structured document. Spatial navigation is often called 'directional navigation' which enables four(top/left/bottom/right) directional navigation. Users are usually familiar with the 2-way navigation using both 'tab key' for the forward direction and 'shift+tab key' for the backward direction, but not familiar with the 4-way navigation using arrow keys.
Regarding TV remote control, game console pad, IVI jog dial with 4-way keys, and Web accessibility, the spatial navigation has been a rising important input mechanism in several industries.
## Details
* Read the [Spec](https://drafts.csswg.org/css-nav-1/)
* Read the [Explainer](https://drafts.csswg.org/css-nav-1/explainer)
* Play with the [Polyfill](polyfill/README.md)
* Try the [Demo](https://wicg.github.io/spatial-navigation/demo/) and [Extension tool](https://github.com/WICG/spatial-navigation/tree/master/tools/chrome-extension)
* See the [Implementation status](implStatus.md)
* Give feedback on [issues for spec](https://github.com/w3c/csswg-drafts/labels/css-nav-1) in CSS WG or [issues for others](https://github.com/WICG/spatial-navigation/issues) in WICG
## Why Use the Polyfill
Eventually, we expect spatial navigation to be natively supported by browsers.
However, this is not yet the case.
Until then, authors who wish to experiment with providing this feature to their users
can include this polyfill in their page.
It can also be used for people interested in reviewing the specification
in order to test the behavior it defines in various situations.
## How to Use
### Installation
```
npm i spatial-navigation-polyfill
```
We recommend only using versions of the polyfill that have been published to npm, rather than cloning the repo and using the source directly. This helps ensure the version you're using is stable and thoroughly tested.
See the [changes](https://wicg.github.io/spatial-navigation/polyfill/changelog.html) in the polyfill so far.
If you do want to build from source, make sure you clone the latest tag!
### Including the Polyfill in a page
Include the following code in your web page,
and the polyfill will be included,
enabling spatial navigation.
```html
...