Sidebar

A versatile sidebar component that provides navigation and content organization with multiple display modes and rich interaction patterns. Perfect for documentation sites, dashboards, and application navigation.

When to use

• Primary navigation for documentation or application
• Hierarchical navigation structure
• Persistent navigation across pages
• Mobile-friendly navigation that can be toggled

Key features

• Multiple display modes: overlay, push, and static
• Left or right positioning
• Collapsible sections with smooth animations
• Mini mode for icon-only navigation
• Full keyboard navigation support
• Focus trapping for accessibility
• Responsive design with mobile support
• Customizable colors, spacing, and animations
• JavaScript API for programmatic control
• ARIA attributes for screen readers

Anatomy

A sidebar consists of:

• Container - The main sidebar panel
• Header - Optional title and close button
• Navigation - List of navigation items
• Sections - Grouped navigation items
• Footer - Optional bottom section for actions
• Overlay - Background overlay for modal mode

Live Application Demo

Experience how the sidebar works in a real application context. The demo below shows a complete application layout with an interactive sidebar.

<!-- Complete Application Layout with Sidebar -->
<div class="app-container">
  <!-- Static Sidebar (always visible, scrolls with page) -->
  <aside class="pm7-sidebar">
    <div class="pm7-sidebar-header">
      <h3>MyApp</h3>
    </div>
    
    <div class="pm7-sidebar-content">
      <nav class="pm7-sidebar-nav">
        <a href="#" class="pm7-sidebar-item pm7-sidebar-item--active">
          <svg class="pm7-sidebar-item-icon"><!-- icon --></svg>
          <span class="pm7-sidebar-item-text">Dashboard</span>
        </a>
        <!-- More nav items -->
      </nav>
    </div>
    
    <div class="pm7-sidebar-footer">
      <a href="#" class="pm7-sidebar-item">
        <svg class="pm7-sidebar-item-icon"><!-- icon --></svg>
        <span class="pm7-sidebar-item-text">Logout</span>
      </a>
    </div>
  </aside>
  
  <main class="app-main">
    <!-- Your main content here -->
  </main>
</div>

Mobile Overlay Sidebar

<!-- Mobile Layout with Overlay Sidebar -->
<header class="mobile-header">
  <button data-pm7-sidebar-trigger="mobile-sidebar">
    <svg class="pm7-icon pm7-icon-menu"><!-- menu icon --></svg>
  </button>
  <h1>Mobile App</h1>
</header>

<!-- Overlay Sidebar for Mobile -->
<aside class="pm7-sidebar" id="mobile-sidebar" data-pm7-sidebar>
  <div class="pm7-sidebar-header">
    <h2>Menu</h2>
    <button class="pm7-sidebar-close">
      <svg class="pm7-icon pm7-icon-x"><!-- close icon --></svg>
    </button>
  </div>
  <!-- sidebar content -->
</aside>

Sidebar Variants

<!-- Mini sidebar with interactive features -->
<aside class="pm7-sidebar pm7-sidebar--mini" data-pm7-sidebar>
  <nav class="pm7-sidebar-nav">
    <button class="pm7-sidebar-item" title="Dashboard">
      <svg class="pm7-sidebar-item-icon"><!-- icon --></svg>
    </button>
    <!-- More icon-only items -->
  </nav>
</aside>

Collapsible Sidebar (Full ↔ Mini)

// Toggle between full and mini sidebar
function toggleSidebar() {
  const sidebar = document.querySelector('.pm7-sidebar');
  sidebar.classList.toggle('pm7-sidebar--mini');
  
  // Optionally save user preference
  localStorage.setItem('sidebar-collapsed', 
    sidebar.classList.contains('pm7-sidebar--mini'));
}

// Restore saved preference on page load
const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
if (isCollapsed) {
  document.querySelector('.pm7-sidebar').classList.add('pm7-sidebar--mini');
}

Important: Static vs Interactive Sidebars

1. Static Sidebar (without data-pm7-sidebar)

<aside class="pm7-sidebar">
  <!-- content -->
</aside>

• Remains in normal document flow
• Scrolls with the page content
• No JavaScript functionality
• Only basic styling (width, min-width)
• Perfect for documentation sites or static layouts

2. Interactive Sidebar (with data-pm7-sidebar)

<aside class="pm7-sidebar" data-pm7-sidebar>
  <!-- content -->
</aside>

• Fixed positioning with slide-in animations
• JavaScript-powered open/close functionality
• Overlay support
• Focus management
• Keyboard navigation
• Perfect for mobile menus or collapsible navigation

Structure

The sidebar component follows a consistent structure:

1. .pm7-sidebar - The main container
2. .pm7-sidebar-content - Content wrapper with padding
3. .pm7-sidebar-section - Section containers
4. .pm7-sidebar-nav - Navigation container
5. .pm7-sidebar-item - Individual navigation items

CSS Classes

CSS Variables

Responsive Behavior

On mobile devices (screens smaller than 768px):

• Sidebar is hidden off-screen by default
• Use .pm7-sidebar--open class to show sidebar
• Sidebar overlays content when open
• Consider adding a backdrop element for better UX

<!-- Mobile sidebar with backdrop -->
<div class="sidebar-backdrop" onclick="closeSidebar()"></div>
<aside class="pm7-sidebar pm7-sidebar--open">
  <!-- sidebar content -->
</aside>

Accessibility

• Use semantic HTML (<aside>, <nav>)
• Add aria-current="page" to active items
• Include aria-label on the aside element
• Ensure proper focus management for keyboard navigation

<aside class="pm7-sidebar" aria-label="Main navigation">
  <div class="pm7-sidebar-content">
    <nav class="pm7-sidebar-nav">
      <a href="#" class="pm7-sidebar-item pm7-sidebar-item--active" aria-current="page">
        Current Page
      </a>
    </nav>
  </div>
</aside>

Copy this link that can be used as documentation for working with this component: