nav-left property CSS Reference

Definition and Usage

The nav-left property specifies where to navigate when using the arrow-left navigation key.

Syntax

nav-left: auto|id|target-name|inherit;

Values

auto

The 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.

If the <id> refers to the currently focused element, the directional navigation input respective to the nav- property is ignored — there is no need to refocus the same element.

<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. If the specified target frame does not exist, the parameter will be treated as the keyword 'current', which means to simply use the frame that the element is in. The keyword 'root' indicates that the user agent should target the full window.

Examples

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;
}