nav-right property CSS Reference



Definition and Usage

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

Name: nav-up, nav-right, nav-down, nav-left
Value: auto | <id> [ current | root | <target-name> ]? | inherit
Initial: auto
Applies to: all enabled elements
Inherited: no
Percentages: N/A
Media: interactive
Computed value: as specified

Syntax

nav-right: 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;
}

Relative articles