Tag HTML nav - Aprenda HTML

A tag <nav> é um dos elementos HTML5. Ela define uma seção de links de navegação, seja dentro do documento atual ou para outros documentos. Blocos de navegação típicos são o menu principal de um site, um sumário, uma trilha de navegação estrutural (breadcrumb) ou um índice. Marcá-los com <nav> melhora tanto a estrutura quanto a semântica do documento, ajudando navegadores, leitores de tela e mecanismos de busca a compreender a página.

Um documento HTML pode conter vários elementos <nav> — por exemplo, um para a navegação global do site e outro para a navegação interna da página.

Quando usar `<nav>` (e quando não usar)

<nav> é destinada a blocos principais de links de navegação, não a qualquer grupo de links na página. Reserve-a para as áreas de navegação primárias e reconhecíveis que um usuário buscaria.

Você não precisa envolver toda lista de links em um <nav>:

Links utilitários no rodapé (política de privacidade, termos, direitos autorais) são geralmente uma decisão de julgamento. Um conjunto pequeno de links legais ou utilitários pode simplesmente ficar dentro do elemento <footer> sem um <nav> extra. Reserve o <nav> no rodapé para um menu secundário genuíno.
Paginação (anterior/próximo, números de página) também é uma decisão de julgamento — é navegação, portanto um <nav> é aceitável, mas um pequeno link "próximo artigo" não precisa de um.
Links dentro do conteúdo dentro de um parágrafo ou corpo de um artigo não pertencem a um <nav>.

Uma boa regra geral: se remover o bloco dificultasse a navegação pelo site ou documento, provavelmente é um <nav>. O elemento <nav> costuma ficar ao lado dos elementos <header>, <main> e <aside>, que estruturam uma página HTML5.

Perigo

A tag <nav> não pode ser aninhada dentro do elemento <address>.

Acessibilidade: o landmark de navegação

Um elemento <nav> expõe automaticamente um landmark navigation às tecnologias assistivas, permitindo que usuários de leitores de tela saltem diretamente para ele. Por isso, você não deve adicionar role="navigation" manualmente — o elemento já o implica.

Quando uma página contém mais de um <nav>, forneça a cada um um nome acessível exclusivo para que os usuários possam diferenciá-los. Use aria-label (para um rótulo literal curto) ou aria-labelledby (para apontar para um cabeçalho visível):

<!-- Primary site navigation -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Breadcrumb navigation on the same page -->
<nav aria-label="Breadcrumb">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <span aria-current="page">Laptops</span>
</nav>

Não inclua a palavra "navegação" no rótulo (por exemplo aria-label="Main navigation") — as tecnologias assistivas já o anunciam como um landmark de navegação, então isso seria lido duas vezes. Use aria-current="page" para marcar o link da página atual.

Sintaxe

A tag <nav> vem em pares. O conteúdo é escrito entre as tags de abertura (<nav>) e de fechamento (</nav>).

Exemplo de uso da tag HTML `<nav>`:

Exemplo da tag nav do HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h1>Programming Courses</h1>
    </header>
    <nav>
      <a href="/learn-html.html">HTML</a> | 
      <a href="/learn-css.html">CSS</a> | 
      <a href="/learn-javascript.html">JavaScript</a> | 
      <a href="/learn-php.html">PHP</a>
    </nav>
    <h2>Welcome to W3Docs!</h2>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da tag `<nav>`:

Exemplo da tag nav do HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav {
        display: flex;
        flex-wrap: wrap;
      }
      nav a {
        text-decoration: none;
        display: block;
        padding: 15px 25px;
        text-align: center;
        background-color: rgb(189, 185, 185);
        color: #464141;
        margin: 0;
        font-family: sans-serif;
      }
      nav a:hover {
        background-color: #777777;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/quiz">Quizzes</a>
      <a href="/snippets">Snippets</a>
      <a href="/tools">Tools</a>
      <a href="/string-functions">String Functions</a>
    </nav>
  </body>
</html>

Experimente Você Mesmo »

Exemplo de criação de um menu suspenso com a tag HTML `<nav>`:

O exemplo abaixo cria um menu suspenso com CSS puro, revelando um <ul> aninhado ao :hover.

Aviso

Este menu suspenso apenas com CSS é mostrado para ilustrar a estrutura do <nav>, não como código pronto para produção. Como os submenus se abrem apenas com o :hover do mouse, eles são inacessíveis por teclado e para a maioria dos usuários de leitores de tela, o que não atende ao WCAG. Um menu suspenso real também precisa responder ao foco do teclado (:focus-within) e expor o estado com atributos como aria-expanded e aria-haspopup — geralmente com uma pequena quantidade de JavaScript.

Exemplo da tag nav ao criar um menu suspenso

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav ul ul {
        display: none;
      }
      nav ul li:hover > ul {
        display: block;
      }
      nav ul:after {
        content: "";
        clear: both;
        display: block;
      }
      nav ul li {
        float: left;
        position: relative;
        list-style-type: none;
      }
      nav ul li:hover {
        background: rgba(19, 20, 123, 0.67);
      }
      nav ul li:hover a {
        color: #fff;
      }
      nav ul li a {
        display: block;
        padding: 20px 30px;
        color: #ffffff;
        text-decoration: none;
        background-color: rgba(35, 17, 134, 0.8);
        font-family: sans-serif;
      }
      nav ul ul {
        background: #5f6975;
        padding: 0;
        position: absolute;
        top: 100%;
      }
      nav ul ul li {
        float: none;
        position: relative;
      }
      nav ul ul li a {
        padding: 15px 10px;
        color: #ffffff;
        text-transform: uppercase;
      }
      nav ul ul li a:hover {
        background: rgba(19, 20, 123, 0.67);
      }
    </style>
  </head>
  <body>
    <h1>Dropdown menu with the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/quiz">Quizzes</a>
          <ul>
            <li>
              <a href="/quiz/html-basic">HTML Basics</a>
            </li>
            <li>
              <a href="/quiz/css-basic">CSS Basics</a>
            </li>
            <li>
              <a href="/quiz/javascript-basic">JavaScript Basics</a>
            </li>
            <li>
              <a href="/quiz/php-basic">PHP Basics</a>
            </li>
            <li>
              <a href="/quiz/es6-basic">ES6 Basics</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/snippets">Snippets</a>
          <ul>
            <li>
              <a href="/snippets/angularjs">Angular JS</a>
            </li>
            <li>
              <a href="/snippets/apache">Apache</a>
            </li>
            <li>
              <a href="/snippets/git">Git</a>
            </li>
            <li>
              <a href="/snippets/linux">Linux</a>
            </li>
            <li>
              <a href="/snippets/nodejs">Node.Js</a>
            </li>
            <li>
              <a href="/snippets/symfony">Symfony</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/tools">Tools</a>
          <ul>
            <li>
              <a href="/tools/html-encoder">HTML ENCODER/DECODER</a>
            </li>
            <li>
              <a href="/tools/css-maker">CSS MAKER</a>
            </li>
            <li>
              <a href="/tools/password-generator">PASSWORD GENERATOR</a>
            </li>
            <li>
              <a href="/tools/image-base64">Base 64</a>
            </li>
            <li>
              <a href="/tools/code-diff">CODE DIFF</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/string-functions">String Functions</a>
          <ul>
            <li>
              <a href="/tools/string-reverse">STRING REVERSE</a>
            </li>
            <li>
              <a href="/tools/string-word-count">STRING WORD COUNT</a>
            </li>
            <li>
              <a href="/tools/string-remove-empty-lines">EMPTY LINES REMOVER</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>

Experimente Você Mesmo »

Atributos

A tag <nav> suporta os Atributos Globais e os Atributos de Evento.. Note que os atributos globais se aplicam a todos os elementos HTML.

Como estilizar uma tag HTML `<nav>`

<nav> é um contêiner semântico sem aparência padrão própria, portanto a estilização é feita com CSS. Um padrão comum é dar à barra um fundo e dispor os links horizontalmente, removendo o sublinhado padrão dos links e os espaçando:

nav {
  background-color: #333;
  padding: 10px;
}
nav a {
  color: white;
  text-decoration: none;
  margin-right: 15px;
}

Para dispor os links em linha, o Flexbox (display: flex no <nav>) é a abordagem moderna, como mostrado no segundo exemplo acima.

Prática

Qual é o objetivo e o uso da tag nav em HTML?

É usada para definir um conjunto de links de navegação.Fornece uma forma para o usuário navegar por um site.É usada para criar abas em uma página web.É usada para incorporar multimídia como áudio e vídeo em uma página web.Define um bloco principal de links de navegação e nem todos os links de um documento HTML precisam estar dentro de um elemento nav.

Quando usar <nav> (e quando não usar)

Acessibilidade: o landmark de navegação

Sintaxe

Exemplo de uso da tag HTML <nav>:

Exemplo da tag <nav>:

Exemplo de criação de um menu suspenso com a tag HTML <nav>:

Atributos

Como estilizar uma tag HTML <nav>

Prática

Quando usar `<nav>` (e quando não usar)

Exemplo de uso da tag HTML `<nav>`:

Exemplo da tag `<nav>`:

Exemplo de criação de um menu suspenso com a tag HTML `<nav>`:

Como estilizar uma tag HTML `<nav>`