Skip to main content

Overview

The .sidebar component provides a persistent, multi-level desktop navigation frame. It supports collapsible icon-only states, nested submenus, headings, badges, and dark themes.

Desktop Sidebar Example

Dashboard Workspace

Click the button above to collapse the sidebar into compact icon mode.

<aside class="sidebar" data-boodoo="sidebar">
  <div class="sidebar-header">
    <a href="#" class="sidebar-brand"><span>App Brand</span></a>
  </div>
  <ul class="sidebar-nav">
    <li class="sidebar-heading"><span>Navigation</span></li>
    <li class="sidebar-item">
      <a href="#" class="sidebar-link active">
        <span class="sidebar-icon">📊</span>
        <span class="sidebar-text">Dashboard</span>
      </a>
    </li>
    <li class="sidebar-item">
      <a href="#" class="sidebar-link" data-boodoo-toggle="sidebar-submenu">
        <span class="sidebar-icon">📁</span>
        <span class="sidebar-text">Projects</span>
        <span class="sidebar-arrow">▶</span>
      </a>
      <ul class="sidebar-submenu">
        <li class="sidebar-item"><a href="#" class="sidebar-link"><span class="sidebar-text">Active</span></a></li>
      </ul>
    </li>
  </ul>
</aside>