`<nav>` or `<menu>` (HTML5)

html

responsive-design

best-practices

accessibility

byAnton Shumikhin·Jan 26, 2025

For main site navigation use <nav>, it groups links leading to major sections of a website. Being a semantic element, it is recognized by screen readers and search engines. <menu>, although less supported, is suitable for toolbars or contextual menus, and often requires JavaScript for functionality.

<nav> example:

<!-- The simple but powerful NAV -->
<nav>
  <a href="#home">Home sweet home</a> | 
  <a href="#about">About (It's all about us, folks!)</a> | 
  <a href="#contact">Contact (Don't be shy!)</a>
</nav>

<menu> example (advanced use):

<!-- The elusive MENU -->
<menu type="toolbar">
  <!-- This button is cooler than a polar bear's toenails -->
  <button type="command" label="Save" onclick="saveDocument()">Save</button>
</menu>

Choosing `<nav>` or `<menu>`

The <nav> element is used for main menus in HTML5, signaling to HTML5Doctor, the key navigator in helping users direct traffic within websites or to external sources.

On the other hand, <menu> is designed for context menus within web applications, unlike navigational links, it presents a collection of commands. So, never use <menu> for site-wide navigation even if it gives a stylish look.

Decoding the HTML5 element use-cases

According to the W3C, HTML standards authority, <nav> is used for navigation between major sections of websites or apps. But <menu> is associated with a set of interactive commands internally, as MDN Web Docs also emphasizes.

Comparing `<nav>` and `<menu>` in practicality

The HTML5 Jack of all trades: `<nav>`

With <nav>, create a main navigation bar that links to different pages or sections of the website. HTML5 recommends using <nav> for sections that facilitate navigation, whether they are internal links or external ones.

The HTML5 specialist: `<menu>`

For specific use cases, <menu> is a gem. If you're developing a Photo Editor app, <menu> would fit well for your "Filters" toolbar, where each option triggers a JavaScript function to apply visual effects.

Falling into the `<menu>` trap

It's easy to misuse <menu> for your site's main navigation. It's designed for a command list in web applications and using it elsewhere could lead to accessibility issues and user confusion.

Taking cues from community consensus

A highly upvoted Stackoverflow answer tips in favor of <nav> for creating a main menu. This mirrors the best practices and the community's preference based on functionality and compatibility.

Crafting with ARIA

ARIA roles enhance accessibility by defining element purposes for assistive technologies. role="navigation" on a <nav> block aids screen reader users in easily identifying your navigational sections.

Embracing progressive enhancement

With progressive enhancement, you ensure your interface remains usable with older browsers, even if they don't support the latest HTML5 tags like <menu>. JavaScript can enhance, not limit, your user experience.

Skip links and HTML5 landmarks simplify navigation for keyboard-only users and those with assistive technologies. Check webAIM for maximizing your navigation's usability.

explain-codes / Html / <nav> or <menu> (HTML5)

Linked

Multiple `` Tags



Using href links inside <option> tag



Should I use ``s and ``s inside my ``s?



Html5 best practices; section/header/aside/article elements



Html 5: Is it <br>, <br/>, or <br />?

