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

Baseline Широко доступно

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

Подробнее
Посмотреть полную таблицу совместимости
Отправить отзыв

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

Попробуйте

<nav class="crumbs">
  <ol>
    <li class="crumb"><a href="#">Bikes</a></li>
    <li class="crumb"><a href="#">BMX</a></li>
    <li class="crumb">Jump Bike 3000</li>
  </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>
  This BMX bike is a solid step into the pro world. It looks as legit as it
  rides and is built to polish your skills.
</p>

nav {
  border-bottom: 1px solid black;
}

.crumbs ol {
  list-style-type: none;
  padding-left: 0;
}

.crumb {
  display: inline-block;
}

.crumb a::after {
  display: inline-block;
  color: black;
  content: ">";
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

Атрибуты

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

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

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

Примеры

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

<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 не обязательно должен содержать список — в нём могут находиться и другие виды содержимого. В этом блоке навигации ссылки представлены в виде текста:

<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 для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`nav`	5	12	4	11.1	5	18	4	11.1	4.2	1.0	4.4	4.2

См. также

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

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

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