CSS nav-left Property

Description

The nav-left property specifies the position of the current element in the sequential navigation order for the current document.

The nav-left property has been deprecated or is no longer in any CSS working groups.

Initial value
auto
Applies to
All enabled elements
Inherited
No
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.navLeft

Syntax

nav-left: auto | <id> [ current | root | <target-name> ]? | inherit

Values

  • autoThe user agent automatically determines which element to navigate the focus to in response to directional navigational input.
  • <id>The <id> value consists of a '#' character followed by an identifier, similar to a fragment identifier in a URL. It indicates the element to which the focus is navigated to in response to directional navigation input respective to the specific property.
  • currentIndicates to use the frame that the element is in.
  • rootIndicates that the user agent should target the full window.
  • <target-name>The <target-name> parameter indicates the target frame for the focus navigation. It is a string and it cannot start with the underscore "_" character.

Example

button { position: absolute }

button#b1 {
  top:0; left:50%;
  nav-index:1;
  nav-right:#b2; nav-left:#b4;
  nav-down:#b2; nav-up:#b4;
}

button#b2 {
  top:50%; left:100%;
  nav-index:2;
  nav-right:#b3; nav-left:#b1;
  nav-down:#b3; nav-up:#b1;
}

button#b3 {
  top:100%; left:50%;
  nav-index:3;
  nav-right:#b4; nav-left:#b2;
  nav-down:#b4; nav-up:#b2;
}

button#b4 {
  top:50%; left:0;
  nav-index:4;
  nav-right:#b1; nav-left:#b3;
  nav-down:#b1; nav-up:#b3;
}

Browser Support

The following table will show you the current browser support for the CSS nav-left property.

Desktop
Edge Chrome Firefox Opera Safari
?????
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
??????