Guida HTML interattiva: Nav

Q: I link dentro nav devono stare in una lista?

È lo schema più comune ed è un buono schema: un di voci permette agli screen reader di annunciare quanti link ha il menu. Anche i link messi direttamente dentro sono validi, per esempio per due o tre link in riga.

Q: Ogni gruppo di link ha bisogno di un elemento nav?

No. Usa solo per i blocchi di navigazione principali. Qualche link in un paragrafo o una breve lista di link legali nel footer non ne hanno bisogno, e troppi landmark di navigazione rendono ognuno più difficile da trovare.

Q: Come creo una barra di navigazione orizzontale?

Metti i link in un dentro , poi dai alla lista display: flex; list-style: none; padding: 0; e un gap. Flexbox dispone le voci in riga.

Q: Come mostro la pagina corrente in una navbar?

Aggiungi aria-current="page" al link della pagina in cui si trova l'utente, e dagli uno stile con il selettore [aria-current="page"]. Così anche gli screen reader la annunciano come pagina corrente.

Una barra di navigazione con nav

Racchiudi il menu in <nav> e metti i link in una lista. Flexbox trasforma la lista in una barra orizzontale:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    nav { background: #111827; }
    nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px; }
    nav a {
      display: block; padding: 8px 14px; border-radius: 6px;
      color: #e5e7eb; text-decoration: none;
    }
    nav a:hover { background: #374151; color: #fff; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

list-style: none e padding: 0 tolgono i punti elenco e il rientro. display: block su ogni link fa sì che il suo padding occupi davvero spazio nella barra, quindi l'area cliccabile è tutto il riquadro con il padding. Cancella la riga display: flex e lo stesso menu diventa una lista verticale, cioè l'aspetto di un menu laterale.

<nav> da solo non si vede. Il suo compito è il significato: gli screen reader lo espongono come landmark di navigazione, così un utente può saltare al menu, o oltre, con un solo tasto.

Indicare la pagina corrente

Aggiungi aria-current="page" al link della pagina mostrata. Dice agli screen reader "sei qui", e dà al CSS un aggancio per evidenziare il link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Current page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; border-bottom: 2px solid #e5e7eb; }
    nav a { display: block; padding: 10px 0; color: #374151; text-decoration: none; }
    nav a[aria-current="page"] {
      color: #2563eb; font-weight: 600;
      box-shadow: inset 0 -3px 0 #2563eb;
    }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#" aria-current="page">Lessons</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>
</html>

Sposta aria-current="page" su un altro link e l'evidenziazione lo segue. Dare lo stile all'attributo invece che a una classe .active tiene sincronizzati aspetto e accessibilità: non puoi avere l'uno senza l'altra.

Una pagina può avere un menu principale, i breadcrumb e un indice, ognuno nel suo <nav>. Dai a ognuno un aria-label, così uno screen reader annuncia "navigazione Breadcrumb" invece di tre voci "navigazione" identiche:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breadcrumb</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .crumbs li + li::before { content: "/"; margin: 0 8px; color: #9ca3af; }
    .crumbs a { color: #2563eb; }
  </style>
</head>
<body>
  <nav class="crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">HTML</a></li>
      <li><span aria-current="page">nav</span></li>
    </ol>
  </nav>
  <h1>HTML nav</h1>
</body>
</html>

I breadcrumb usano una lista ordinata <ol> perché l'ordine conta. Le barre vengono da ::before del CSS, così gli screen reader non leggono "barra" tra una voce e l'altra. L'ultima voce è la pagina corrente e non è un link.

Un indice

Anche una lista di link verso le sezioni della stessa pagina è navigazione. I link #id saltano all'elemento con quell'id; provali nell'anteprima:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table of contents</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; }
    nav h2 { font-size: 14px; margin: 4px 0; }
    section { min-height: 200px; border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-labelledby="toc-title">
    <h2 id="toc-title">On this page</h2>
    <ol>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
      <li><a href="#deploy">Deploy</a></li>
    </ol>
  </nav>
  <section id="install"><h2>Install</h2></section>
  <section id="configure"><h2>Configure</h2></section>
  <section id="deploy"><h2>Deploy</h2></section>
</body>
</html>

Qui l'etichetta viene da un titolo visibile tramite aria-labelledby, che è meglio di aria-label quando il titolo è già sullo schermo.

Sugli schermi stretti i menu di solito si nascondono dietro un pulsante. Usa un vero <button> con aria-expanded, e tieni i link dentro <nav>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; border: 1px solid #111827; border-radius: 6px; background: #fff; cursor: pointer; }
    #menu { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 8px; }
    #menu a { display: block; padding: 10px 14px; color: #111827; text-decoration: none; }
    #menu li + li { border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <button aria-expanded="false" aria-controls="menu" id="toggle">Menu</button>
    <ul id="menu" hidden>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <script>
    const toggle = document.getElementById('toggle');
    const menu = document.getElementById('menu');
    toggle.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      menu.hidden = open;
    });
  </script>
</body>
</html>

aria-expanded dice a uno screen reader se il menu è aperto, e l'attributo hidden toglie la lista sia dallo schermo sia dall'albero di accessibilità finché è chiuso. Sugli schermi larghi mostreresti la lista con una media query e nasconderesti il pulsante.

Errori comuni

Racchiudere ogni gruppo di link in <nav>. Usalo per il menu principale, i breadcrumb, la paginazione e gli indici. I link dentro il testo non sono blocchi di navigazione.
Un pulsante del menu fatto con un <div>. Non riceve il focus e non si può premere con la tastiera. Usa <button>.
Più nav senza etichette. Aggiungi aria-label o aria-labelledby a ognuno così si possono distinguere.
Colorare soltanto il link corrente. Aggiungi aria-current="page"; il colore da solo non viene annunciato e potrebbe non essere visibile a tutti.
Link con href="#" in produzione. In una demo vanno bene, ma le voci di un menu vero hanno bisogno di URL veri, così funzionano anche quando vengono aperte in una nuova scheda. La pagina sui link spiega come funzionano i valori di href.

Domande frequenti

Cos'è il tag nav in HTML?

<nav> è un elemento semantico che racchiude un blocco di link di navigazione principali, come il menu del sito, un indice o i breadcrumb. Gli screen reader lo elencano come landmark di navigazione così gli utenti possono saltarci direttamente.

I link dentro nav devono stare in una lista?

È lo schema più comune ed è un buono schema: un <ul> di voci <li> permette agli screen reader di annunciare quanti link ha il menu. Anche i link messi direttamente dentro <nav> sono validi, per esempio per due o tre link in riga.

Ogni gruppo di link ha bisogno di un elemento nav?

No. Usa <nav> solo per i blocchi di navigazione principali. Qualche link in un paragrafo o una breve lista di link legali nel footer non ne hanno bisogno, e troppi landmark di navigazione rendono ognuno più difficile da trovare.

Come creo una barra di navigazione orizzontale?

Metti i link in un <ul> dentro <nav>, poi dai alla lista display: flex; list-style: none; padding: 0; e un gap. Flexbox dispone le voci in riga.

Come mostro la pagina corrente in una navbar?

Aggiungi aria-current="page" al link della pagina in cui si trova l'utente, e dagli uno stile con il selettore [aria-current="page"]. Così anche gli screen reader la annunciano come pagina corrente.

Una pagina può avere più di un nav?

Sì, per esempio un menu principale, un percorso di breadcrumb e un indice. Dai a ognuno un aria-label diverso, come "Main" o "Breadcrumb", così chi usa uno screen reader li può distinguere.

Concetti correlati