Skip to content
TeaCSS documentation

Navigations

Directional and spatial navigation properties. TeaCSS Standard reference.

This is the Standard reference for navigations. It follows the authored TeaCSS vocabulary at source revision fa3709a for package version 0.7.1. Each value list gives finite examples and named values for its prefixes. A bracket or variable example demonstrates that open form for the same prefix; the listed arbitrary literals are samples, not every accepted literal. Check the Storybook token reference for more examples, and do not infer support from a different prefix.

reading-flow

Interactive example. Prefixes: reading-flow. Example: reading-flow:normal. It emits reading-flow:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (7)

normal, source-order, flex-visual, flex-flow, grid-rows, grid-columns, grid-order

reading-order

Interactive example. Prefixes: reading-order. Example: reading-order:-1. It emits reading-order:-1;.

Documented values (5)

-1, 0, 1, 2, $order

Interactive example. Maturity: experimental. Browser support: CSS Basic UI Level 4 directional-focus navigation properties have limited browser support.

Prefixes: nav-up. Example: nav-up:auto. It emits nav-up:auto;.

Documented values (2)

auto, [#next_current]

Interactive example. Maturity: experimental. Browser support: CSS Basic UI Level 4 directional-focus navigation properties have limited browser support.

Prefixes: nav-right. Example: nav-right:auto. It emits nav-right:auto;.

Documented values (2)

auto, [#next_current]

Interactive example. Maturity: experimental. Browser support: CSS Basic UI Level 4 directional-focus navigation properties have limited browser support.

Prefixes: nav-down. Example: nav-down:auto. It emits nav-down:auto;.

Documented values (2)

auto, [#next_current]

Interactive example. Maturity: experimental. Browser support: CSS Basic UI Level 4 directional-focus navigation properties have limited browser support.

Prefixes: nav-left. Example: nav-left:auto. It emits nav-left:auto;.

Documented values (2)

auto, [#next_current]

spatial-navigation-contain

Interactive example. Maturity: experimental. Browser support: CSS Spatial Navigation properties have limited browser support.

Prefixes: spatial-nav-contain. Example: spatial-nav-contain:auto. It emits spatial-navigation-contain:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (2)

auto, contain

spatial-navigation-action

Interactive example. Maturity: experimental. Browser support: CSS Spatial Navigation properties have limited browser support.

Prefixes: spatial-nav-action. Example: spatial-nav-action:auto. It emits spatial-navigation-action:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (3)

auto, focus, scroll

spatial-navigation-function

Interactive example. Maturity: experimental. Browser support: CSS Spatial Navigation properties have limited browser support.

Prefixes: spatial-nav-function. Example: spatial-nav-function:normal. It emits spatial-navigation-function:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (2)

normal, grid