1.6. Structure navigation menus with lists
Use unordered list elements <ul> and <li> to mark up navigation menus.
For primary menus with several levels, be sure to nest the links appropriately:
<nav role="navigation" aria-label="Main menu">
<ul>
<li><a href="…">First menu item</a></li>
<li>
<a href="…">Second menu item</a>
<ul>
<li><a href="…">First sub-menu item</a></li>
<li><a href="…">Second sub-menu item</a></li>
</ul>
</li>
<li><a href="…">Third menu item</a></li>
</ul>
</nav>
Why should I structure lists?
Structuring lists is important for people who use screen readers (blind and visually-impaired people). When readers come across a list, structuring enables them to:
- Navigate from list to list on a page.
- Know, from the start, the number of items on the page.
- Navigate more easily through the list:
- Go directly to the end of the list if the content does not interest them.
- Easily go back to the beginning of the list.