-2

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.

Nick
  • 5,995
  • 12
  • 54
  • 78
  • 1
    HTML elements are used to describe their contents and not their layout. Always refer to [the standard](https://html.spec.whatwg.org/dev/sections.html#the-nav-element) with such questions. – Rob Apr 15 '23 at 12:10

1 Answers1

1

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>
Extraordinary
  • 106
  • 1
  • 10
  • Thanks :) It seems Bootstrap says it's OK here as well: https://getbootstrap.com/docs/4.0/components/navs/ – Nick Apr 15 '23 at 00:00