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

  • Initial valueauto
  • Applies toAll enabled elements
  • InheritedNo
  • MediaInteractive
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript
Formal syntax: auto | <id> [ current | root | <target-name> ]? | inherit
  • 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.
button { position: absolute }

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

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

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

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

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.