CSS nav-index
La proprietà CSS3 nav-index controlla l’ordine di navigazione tramite tastiera
La proprietà nav-index
definisce la priorità di focus tra elementi quando si naviga con tastiera o controller. È utile nei layout per smart TV o in ambienti dove il focus deve essere controllato in modo preciso, anche se l’elemento appare più in basso nel DOM. Valori più bassi vengono selezionati prima.
Sintassi
Significato dei valori principali:
-
numero: Imposta un valore intero per l'ordine di navigazione. Numeri più bassi ricevono focus prima.
-
auto: (default) L’ordine è determinato dal browser in base alla struttura DOM.
-
inherit: L’elemento eredita il valore dal suo elemento padre.
⚠️ Nota sul supporto:
nav-index
è parte della specifica CSS3 Basic User Interface Module, ma non è supportata dalla maggior parte dei browser moderni, dove per il controllo del focus, si usa generalmente tabindex (standard HTML) al posto di nav-index.
Anche se non è ampiamente supportata nei browser moderni, è pensata per contesti come dispositivi TV, console, o applicazioni che usano telecomandi e tastiere direzionali.
Esempio proprietà: nav-index
Codice Esempio: nav-index

.nav-index-example {
width: 250px;
height: 60px;
margin: 10px auto;
text-align: center;
line-height: 60px;
background-color: #ffe082;
border: 2px solid #ff6f00;
border-radius: 8px;
font-size: 18px;
}
#a { nav-index: 3; }
#b { nav-index: 1; }
#c { nav-index: 2; }
Contenuto Esempio: nav-index
Esempio di utilizzo di nav-index
In questo esempio, gli elementi riceveranno focus in base al valore nav-index
(non secondo l’ordine DOM):
CSS e HTML per l'ordine con nav-index:
<style>
.nav-index-example {
width: 250px;
height: 60px;
margin: 10px auto;
text-align: center;
line-height: 60px;
background-color: #ffe082;
border: 2px solid #ff6f00;
border-radius: 8px;
font-size: 18px;
}
#a { nav-index: 3; }
#b { nav-index: 1; }
#c { nav-index: 2; }
</style>
<div id="a" class="nav-index-example" tabindex="0">Elemento A (nav-index: 3)</div>
<div id="b" class="nav-index-example" tabindex="0">Elemento B (nav-index: 1)</div>
<div id="c" class="nav-index-example" tabindex="0">Elemento C (nav-index: 2)</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.