<aside>

The <aside> element represents content tangentially related to the main content — like sidebars, call-outs, or supplementary navigation.

Important: Assistive technologies implicitly add the role="complementary", so it's best not to combine it with other roles like role="group".

Basic Usage

<aside>
  <h4>BrandName</h4>
    <a href="#">Dashboard</a>
</aside>

Left Sidebar

Add the .sidebar class for a styled sidebar panel.

<aside class="sidebar">
  <h4>Guide</h4>
    <nav>
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#">Layout</a></li>
    </ul>
  </nav>
  
    <a href="#" role="button" class="ghost">Support</a>
</aside>

Right Sidebar

<aside class="sidebar">
  <h4>On this page</h4>
    <nav>
    <ul>
      <li><a href="#">Install</a></li>
      <li><a href="#">Usage</a></li>
    </ul>
  </nav>
</aside>