Docs executáveis de HTML: Tag nav

Q: Os links dentro do nav devem ficar numa lista?

É o padrão comum, e é um bom padrão: uma de itens permite que os leitores de tela anunciem quantos links o menu tem. Links soltos direto dentro de também são válidos, por exemplo para dois ou três links em linha.

Q: Todo grupo de links precisa de um elemento nav?

Não. Use só para blocos de navegação principais. Alguns links num parágrafo ou uma lista curta de links legais no rodapé não precisam dele, e landmarks de navegação demais tornam cada um mais difícil de achar.

Q: Como fazer uma barra de navegação horizontal?

Coloque os links numa dentro de e dê à lista display: flex; list-style: none; padding: 0; e um gap. O flexbox coloca os itens em linha.

Q: Como mostrar a página atual numa navbar?

Adicione aria-current="page" ao link da página em que o usuário está e estilize com o seletor [aria-current="page"]. Os leitores de tela também passam a anunciá-lo como a página atual.

Uma barra de navegação com nav

Envolva o seu menu em <nav> e coloque os links numa lista. O flexbox transforma a lista numa barra horizontal:

<!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 removem os marcadores e o recuo. display: block em cada link faz o padding ocupar espaço de verdade na barra, então a caixa inteira com padding é o alvo do clique. Apague a linha display: flex e o mesmo menu vira uma lista vertical, que é a cara de um menu de barra lateral.

O <nav> em si não tem aparência nenhuma. O trabalho dele é o significado: os leitores de tela o expõem como um landmark de navegação, então o usuário pode pular para o menu, ou passar por ele, com uma tecla.

Marque a página atual

Adicione aria-current="page" ao link da página que está sendo exibida. Ele diz aos leitores de tela "você está aqui" e dá ao CSS um gancho para destacar o 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>

Mova aria-current="page" para outro link e o destaque o acompanha. Estilizar o atributo em vez de uma classe .active mantém a aparência e a acessibilidade em sincronia: você não tem uma sem a outra.

Vários navs numa página: rótulos e breadcrumbs

Uma página pode ter um menu principal, breadcrumbs e um sumário, cada um no seu próprio <nav>. Dê a cada um um aria-label, para que o leitor de tela anuncie "navegação Breadcrumb" em vez de três entradas "navegação" idênticas:

<!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>

Breadcrumbs usam uma lista ordenada <ol> porque a ordem importa. As barras vêm do ::before do CSS, então os leitores de tela não leem "barra" entre cada item. O último item é a página atual e não é um link.

Um sumário

Uma lista de links para seções da mesma página também é navegação. Links #id pulam para o elemento com esse id; teste na prévia:

<!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>

Aqui o rótulo vem de um título visível com aria-labelledby, o que é melhor que aria-label quando o título já está na tela.

Em telas estreitas, os menus normalmente ficam escondidos atrás de um botão. Use um <button> de verdade com aria-expanded e mantenha os links dentro do <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 diz ao leitor de tela se o menu está aberto, e o atributo hidden tira a lista da tela e da árvore de acessibilidade enquanto ela está fechada. Em telas largas, você mostraria a lista com uma media query e esconderia o botão.

Erros comuns

Envolver todo grupo de links em <nav>. Use para o menu principal, breadcrumbs, paginação e sumários. Links dentro do texto não são blocos de navegação.
Um botão de menu feito com <div>. Não recebe foco nem pode ser acionado pelo teclado. Use <button>.
Vários navs sem rótulos. Adicione aria-label ou aria-labelledby a cada um para que possam ser diferenciados.
Só colorir o link atual. Adicione aria-current="page"; a cor sozinha não é anunciada e pode não ser visível para todos.
Links com href="#" em produção. Servem numa demonstração, mas os itens de um menu real precisam de URLs reais para funcionar quando abertos numa nova aba. A página de link HTML explica como os valores de href funcionam.

Perguntas frequentes

O que é a tag nav no HTML?

<nav> é um elemento semântico que envolve um bloco de links de navegação principais, como o menu do site, um sumário ou breadcrumbs. Os leitores de tela o listam como um landmark de navegação para que o usuário pule direto até ele.

Os links dentro do nav devem ficar numa lista?

É o padrão comum, e é um bom padrão: uma <ul> de itens <li> permite que os leitores de tela anunciem quantos links o menu tem. Links soltos direto dentro de <nav> também são válidos, por exemplo para dois ou três links em linha.

Todo grupo de links precisa de um elemento nav?

Não. Use <nav> só para blocos de navegação principais. Alguns links num parágrafo ou uma lista curta de links legais no rodapé não precisam dele, e landmarks de navegação demais tornam cada um mais difícil de achar.

Como fazer uma barra de navegação horizontal?

Coloque os links numa <ul> dentro de <nav> e dê à lista display: flex; list-style: none; padding: 0; e um gap. O flexbox coloca os itens em linha.

Como mostrar a página atual numa navbar?

Adicione aria-current="page" ao link da página em que o usuário está e estilize com o seletor [aria-current="page"]. Os leitores de tela também passam a anunciá-lo como a página atual.

Uma página pode ter mais de um nav?

Sim, por exemplo um menu principal, uma trilha de breadcrumbs e um sumário. Dê a cada um um aria-label diferente, como "Main" ou "Breadcrumb", para que quem usa leitor de tela consiga diferenciá-los.

Conceitos relacionados