Sidebar

The primary navigation structure — grouped sections, collapsible areas, and user profile.

Application Sidebar

HTML

<aside class="monarch-sidebar">
  <div class="monarch-sidebar__header">
    <!-- Logo -->
  </div>
  <nav class="monarch-sidebar__nav">
    <div class="monarch-nav-section">
      <div class="monarch-nav-section__title">Intelligence</div>
      <div class="monarch-nav-section__items">
        <a class="monarch-nav-item monarch-nav-item--active" href="#">
          <svg class="monarch-nav-item__icon">...</svg>
          <span class="monarch-nav-item__label">Dashboard</span>
        </a>
      </div>
    </div>
  </nav>
  <div class="monarch-sidebar__footer">...</div>
</aside>