Should I use <aside> for off-canvas navigation? [closed]

Question

I want to create an accessible off-canvas navigation and most tutorials say you should put it inside the <aside> element, however, since it is my main navigation which will appear on one line on desktop, wouldn't it be un-semantical to put it inside <aside> ?

Here is my current code:

<nav id="primary-nav" aria-label="Main Navigation">
<ul class="container">
 <li>
    <a href="#">Portfolio</a>
  </li>
  <li>
    <a href="#">Meet Stefany</a>
  </li>
   etc...
  </ul>
    </nav>

Answer 1

You are doing it correctly. Navigation areas should be in a <nav> element (or a <div> with role="navigation"). You even have an aria-label for your <nav> - bravo!

most tutorials say you should put it inside the element

Do you have a reference for such a tutorial?

The html spec for <aside> does say it could be used for groups of <nav> elements, so I suppose that's one reference, but I'm not sure I've seen groups of <nav> elements before.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of <nav> elements, and for other content that is considered separate from the main content of the nearest ancestor sectioning content.

So the navigation elements themselves (often a list) should be contained in a <nav> but the <nav> itself might be contained in an <aside>. I've never organized my navigation elements that way.