<nav>: Элемент раздела навигации

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Элемент <nav> HTML представляет собой раздел страницы, предназначенный для предоставления ссылок на навигацию, как внутри текущего документа, так и в другие документы. Типичные примеры разделов навигации — меню, оглавления и индексы.

Попробуйте

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

Необязательно, чтобы все ссылки были вложены в элемент <nav>. <nav> предназначен только для крупных блоков навигационных ссылок; как правило, элемент <footer> часто содержит список ссылок, которые не обязательно должны быть в элементе <nav>.
В документе может быть несколько элементов <nav>, например, один для навигации по сайту и один для навигации по страницам. aria-labelledby можно использовать в таком случае для повышения доступности, см. пример.
Средства пользователя, такие как программы для чтения с экрана для людей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли пропускать начальную отрисовку контента только для навигации.

Примеры

В этом примере блок <nav> используется для размещения неупорядоченного списка (<ul>) ссылок. С помощью соответствующего CSS это может быть представлено как боковая панель, навигационная панель или выпадающее меню.

html

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Семантика элемента nav заключается в предоставлении ссылок. Однако элемент nav не обязан содержать список, он также может содержать и другой контент. В этом блоке навигации ссылки представлены в текстовой форме:

html

<nav>
  <h2>Navigation</h2>
  <p>
    You are on my home page. To the north lies <a href="/blog">my blog</a>, from
    whence the sounds of battle can be heard. To the east you can see a large
    mountain, upon which many <a href="/school">school papers</a> are littered.
    Far up this mountain you can spy a little figure who appears to be me,
    desperately scribbling a <a href="/school/thesis">thesis</a>.
  </p>
  <p>
    To the west are several exits. One fun-looking exit is labeled
    <a href="https://games.example.com/">"games"</a>. Another more
    boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
  </p>
  <p>
    To the south lies a dark and dank <a href="/about">contacts page</a>.
    Cobwebs cover its disused entrance, and at one point you see a rat run
    quickly out of the page.
  </p>
</nav>

Результат

Техническое описание

Категории контента	Потоковый контент, разделяющий контент, ощутимый контент.
Разрешенный контент	Потоковый контент.
Пропуск тегов	Нет, и начальный, и конечный тег обязательны.
Разрешенные родительские элементы	Любой элемент, который принимает потоковый контент.
Неявная роль ARIA	`navigation`
Разрешенные роли ARIA	Нет `role` разрешенных ролей
Интерфейс DOM	`HTMLElement`

Спецификации

Спецификация
Стандарт HTML # the-nav-element

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`nav`	5	12	4	11.1	5	18	4	11.1	4.2	1.0	4.4

См. также

Другие элементы, относящиеся к разделам: <body>, <article>, <section>, <aside>, h1, h2, h3, h4, h5, h6, <hgroup>, <header>, <footer>, <address>;
Разделы и структуры HTML-документа.
ARIA: роль навигации

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav