Search code examples
htmlsemantic-markup

Is it correct to use the <menu> element as navigation?

Is it correct to use the <menu> tag as navigation? Like that:

<menu>
    <li><a href="#">Home</a></li>
    <li><a href="#">Page one</a></li>
    <li><a href="#">Page two</a></li>
    <li><a href="#">Page three</a></li>
</menu>

Or is it indicated only for a Context menu, like the example on Mozilla?

Solution

  • In your exmaple you are using the <menu> tag correctly and as matter of fact that is the way you should actually code a navigation list.
    The <menu> tag is a sementic alternative to the unsemantic <ul> as is treated by the browser as the same.

    To quote MDN WebDocs:

    The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, while <menu> was intended for interactive items.

    <a>nchors are interactive elements and as such the <menu> should be correctly used as a list container in that case.

    However, your wording is incorrect. <menu> is only a container for the unordered list of anchors but not an entire navigation for which the <nav> element should be used.

    As example a navigation bar could contain more then just links:

    <nav>
  <img src="logo.jpg" alt="Website Logo">
  <h1>table of contents</h1>
  <menu>
    <li><a href="#chapter-1">Chapter 1</a></li>
    <li><a href="#chapter-2">Chapter 2</a></li>
    <li><a href="#chapter-3">Chapter 3</a></li>
  </menu>
  <input type="text" id="search-bar">
</nav>