<nav>
A block of primary navigation links: a menu, a table of contents, breadcrumbs.
- Display
- block
- Closing tag
- Required
- Permitted content
- Flow content without a
<main>element
Example
#<nav aria-label="Breadcrumbs">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/docs">Docs</a></li>
<li aria-current="page">HTML</li>
</ol>
</nav>Definition and usage
#The <nav> element marks a group of links used for getting around the site or the current page: the main menu, breadcrumbs, a table of contents, pagination.
Not every group of links is navigation. Links to the terms of service in a footer, or a list of tags under an article, usually don’t need <nav>. Save it for the main navigation blocks.
If a page has several <nav> elements, give each one a name with aria-label, for example "Main" and "Breadcrumbs." A screen reader will then read out which navigation is which.
Syntax
#<nav aria-label="Navigation name">
…
</nav>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
Default CSS
#Most browsers display this element with these default styles:
nav {
display: block;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Menu links are most often laid out as a
<ul>or<ol>list. A screen reader will then announce the number of items. - Mark the current page with the
aria-current="page"attribute.
Related entries
#Spotted a mistake or missing an example? Write to us.