CSS3 nav-index Property


Example

Specify where to navigate when using the arrow keys:

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

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

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

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

Try it yourself »

Definition and Usage

The nav-index property specifies the sequential navigation order ("tabbing order") for an element.

Default value: auto
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.navIndex=2

Browser Support

The nav-index property is only supported in Opera 12 and some earlier versions. This property became deprecated and obsolete in Opera 15.

Property
nav-index Not supported Not supported Not supported Not supported Supported in Opera 11.5-12.
 Not supported in newer versions

CSS Syntax

nav-index: auto|number|initial|inherit;

Property Values

Value Description
auto Default value. The element's tabbing order is assigned by the browser
number Indicates the tabbing order for the element. 1 means first
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit




SHARE THIS PAGE

Color Picker

colorpicker