Sidebar

Overview

The sidebar component provides a responsive navigation panel that adapts between mobile (offcanvas) and desktop (fixed) layouts.

Note: The sidebar you're currently viewing in this documentation is built using this component!

Basic Structure

<!-- Toggle Button (Mobile) -->
<button class="bl-sidebar-toggle">
  <i class="fas fa-bars"></i>
</button>

<!-- Sidebar -->
<aside class="bl-sidebar">
  <div class="bl-sidebar-header">
    <h3>Menu</h3>
    <button class="bl-sidebar-close">×</button>
  </div>
  
  <nav class="bl-sidebar-nav">
    <ul class="bl-nav">
      <li><a href="#" class="bl-nav-link">Item 1</a></li>
      <li><a href="#" class="bl-nav-link">Item 2</a></li>
    </ul>
  </nav>
  
  <div class="bl-sidebar-footer">
    <!-- Footer content -->
  </div>
</aside>

<!-- Backdrop (Mobile) -->
<div class="bl-sidebar-backdrop"></div>

Behavior

Mobile (< 768px)

• Sidebar is hidden off-canvas by default
• Toggle button shows hamburger menu icon
• Opens with slide animation from left
• Backdrop overlay appears behind sidebar
• Body scroll is locked when open

Desktop (≥ 768px)

• Sidebar is always visible and fixed
• No backdrop needed
• Can be collapsed to show only icons
• Toggle button is hidden

Variants

Right-Aligned Sidebar

Add bl-sidebar-right to position the sidebar on the right side.

<aside class="bl-sidebar bl-sidebar-right">
  <!-- Sidebar content -->
</aside>

Collapsed Sidebar (Desktop)

Add bl-sidebar-collapsed to show a collapsed sidebar with icons only.

<aside class="bl-sidebar bl-sidebar-collapsed">
  <!-- Text labels hidden, icons remain visible -->
</aside>

Features

• Responsive: Adapts between mobile offcanvas and desktop fixed layout
• Glassmorphism: Beautiful glass effect with backdrop blur
• Smooth Animations: Slide-in/out transitions for mobile
• Backdrop Overlay: Automatic backdrop for mobile view
• Body Scroll Lock: Prevents scrolling when sidebar is open on mobile
• Collapsible: Desktop sidebar can collapse to icon-only mode
• Keyboard Accessible: Full keyboard navigation support

JavaScript API

The sidebar requires JavaScript for interactivity. The Baseline UI JavaScript automatically initializes all sidebars.

// Open sidebar
document.querySelector('.bl-sidebar').classList.add('bl-sidebar-open');

// Close sidebar
document.querySelector('.bl-sidebar').classList.remove('bl-sidebar-open');

// Toggle sidebar
document.querySelector('.bl-sidebar').classList.toggle('bl-sidebar-open');