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

Tip: Use the accordion below to explore different sidebar demos. Click "Open in new tab" to see the full demo page.

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: