Search code examples
htmlsemantic-markup

Semantic way to place sidebar nav in admin panel

I'm building an admin panel mockup. I need to create a sidebar navigation and I'm searching for a semantic way to do it. What is important: I need to place there also a footer.

I was thinking about something this way:

<div class="page-container">
  <!-- Sidebar -->
  <aside>
    <div class="brand">
      Brand
    </div>
    <nav>
      ....
    </nav>
    <footer>
      Footer
    </footer>
  </aside>

  <!-- Content -->
  <div class="content-container">
    ....
  </div>
</div>
Solution

  • To do everything right, follow the HTML5 specification. There is the aside element section specially for your case.