Search code examples
htmlsemantic-markup

Vertical <nav> menu

Is it legitimate to use the HTML5 semantic "nav" element for a vertical side navigation menu?

Some of the stuff I've come across seems to suggest that it is meant to be horizontal.

Solution

  • Yes, it is legitimate to use the HTML5 semantic "nav" element for a vertical side navigation menu. Feel free to use the "nav" element for a vertical side navigation menu. Just be sure to use it appropriately to help users understand the structure and purpose of your content. Example:

    <body>
  <nav>
    <ul>
      <li><a href="#section-1">Section 1</a></li>
      <li><a href="#section-2">Section 2</a></li>
      <li><a href="#section-3">Section 3</a></li>
      <li><a href="#section-4">Section 4</a></li>
    </ul>
  </nav>
  <main>
    <section id="section-1">
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </section>
    <section id="section-2">
      <h2>Section 2</h2>
      <p>Nullam consectetur mauris euismod dolor consectetur, vel bibendum ante rutrum.</p>
    </section>
    <section id="section-3">
      <h2>Section 3</h2>
      <p>Donec vehicula nisi vel ex vestibulum, sed tempus sapien faucibus.</p>
    </section>
    <section id="section-4">
      <h2>Section 4</h2>
      <p>Etiam vulputate libero in elit finibus, sit amet cursus elit pellentesque.</p>
    </section>
  </main>
</body>