skip to Main Content

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?

2

Answers


  1. If you’re asking if it would work then it absolutely works.
    But if you’re asking me would i recomend it?
    Absolutely not.
    Hope it clarifies your doubt.
    Thank You!

    Login or Signup to reply.
  2. 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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search