Sidebar

Simple API

Collapsible items are auto-initialized. Control sidebars with Sidebar.toggle(), Sidebar.open(), Sidebar.close().

Basic Sidebar

A simple sidebar with navigation items. Works with CSS only for static navigation.

Main content area

HTML

<aside class="focus-sidebar">
  <div class="focus-sidebar-header">
    <h3>My App</h3>
  </div>
  <nav class="focus-sidebar-nav">
    <a href="#" class="focus-sidebar-item focus-sidebar-item-active">
      <i class="fa fa-home"></i>
      <span>Dashboard</span>
    </a>
    <a href="#" class="focus-sidebar-item">
      <i class="fa fa-user"></i>
      <span>Profile</span>
    </a>
  </nav>
</aside>

Sections with Collapsible Items

Organize navigation with sections and collapsible items. Collapsible items are auto-initialized when you include focus-ui.js!

Click "Settings" to navigate, or click the chevron to expand nested options.

HTML

<aside class="focus-sidebar">
  <nav class="focus-sidebar-nav">
    <div class="focus-sidebar-section">
      <h4>Main</h4>
      <a href="#" class="focus-sidebar-item">
        <i class="fa fa-home"></i>
        <span>Home</span>
      </a>

      <!-- Collapsible item -->
      <div class="focus-sidebar-item-wrapper">
        <a href="#" class="focus-sidebar-item focus-sidebar-item-with-toggle">
          <i class="fa fa-cog"></i>
          <span>Settings</span>
        </a>
        <button class="focus-sidebar-collapse-toggle collapsed"
                data-collapse-id="settings"
                aria-label="Toggle Settings">
          <i class="fa fa-chevron-down"></i>
        </button>
      </div>
      <div class="focus-sidebar-collapsible-items collapsed" id="collapse-settings">
        <a href="#" class="focus-sidebar-item focus-sidebar-item-nested">
          <i class="fa fa-user-cog"></i>
          <span>Account</span>
        </a>
      </div>
    </div>
  </nav>
</aside>

Collapsible Behaviors

Two patterns: Navigation + Toggle (click name to navigate, arrow to expand) vs Toggle Only (click anywhere to expand, no navigation).

Two Collapsible Patterns

Blog Posts (Navigation + Toggle)

Click "Blog Posts" text → navigates to page
Click chevron → expands/collapses nested items

Settings (Toggle Only)

Click anywhere → expands/collapses
No navigation (Settings has no own page)

HTML

<!-- Pattern 1: Navigation + Toggle (has page) -->
<div class="focus-sidebar-item-wrapper">
  <a href="/blog" class="focus-sidebar-item focus-sidebar-item-with-toggle">
    <i class="fa fa-blog"></i>
    <span>Blog Posts</span>
  </a>
  <button class="focus-sidebar-collapse-toggle collapsed"
          data-collapse-id="blog">
    <i class="fa fa-chevron-down"></i>
  </button>
</div>
<div class="focus-sidebar-collapsible-items collapsed" id="collapse-blog">
  <a href="#" class="focus-sidebar-item focus-sidebar-item-nested">New Post</a>
</div>

<!-- Pattern 2: Toggle Only (no page) -->
<button class="focus-sidebar-item focus-sidebar-item-collapsible collapsed"
        data-collapse-id="settings-group">
  <i class="fa fa-cog"></i>
  <span>Settings</span>
  <i class="fa fa-chevron-down focus-sidebar-collapse-icon"></i>
</button>
<div class="focus-sidebar-collapsible-items collapsed" id="collapse-settings-group">
  <a href="#" class="focus-sidebar-item focus-sidebar-item-nested">Account</a>
</div>

Full Documentation Sidebar

Complete sidebar with sections, collapsible groups, and footer - just like this docs site!

Full Sidebar Structure

2 sections with headers
Regular navigation items
Collapsible Templates group
Footer with GitHub link

Try expanding Templates!

Dark Theme

Add .focus-sidebar-dark for a dark variant.

Content area

HTML

<aside class="focus-sidebar focus-sidebar-dark">
  ...
</aside>

Sidebar Widths

Control sidebar width with modifier classes.

HTML

<!-- Narrow (200px) -->
<aside class="focus-sidebar focus-sidebar-narrow">...</aside>

<!-- Default (260px) -->
<aside class="focus-sidebar">...</aside>

<!-- Wide (320px) -->
<aside class="focus-sidebar focus-sidebar-wide">...</aside>

Mobile Responsive

On mobile (≤768px), the sidebar becomes a fixed overlay. Use the Sidebar API to toggle visibility.

JavaScript

// Toggle sidebar visibility on menu button click
document.getElementById('menuBtn').addEventListener('click', () => {
  Sidebar.toggle('#mySidebar')
})

// Close sidebar when clicking outside of it (but not on the menu button itself)
document.addEventListener('click', (e) => {
  const sidebar = document.getElementById('mySidebar')
  // Only close if click target is outside sidebar AND is not the menu button
  if (!sidebar.contains(e.target) && !e.target.matches('#menuBtn')) {
    Sidebar.close('#mySidebar')
  }
})

JavaScript API

Control sidebar visibility and collapsible items programmatically. Collapsible items are auto-initialized on page load.

Initialize

JavaScript

Sidebar.init('#mySidebar')

Sidebar.init('#mySidebar', {
  accordion: true,
  scope: 'sidebar',
  expandActiveGroup: true
})

In development builds, repeated initialization discovers new controls without duplicating handlers or resetting their state. Pass options on the first initialization; destroy the instance before changing options. A nested container takes ownership from document auto-init. Collapsed groups are inert so hidden links cannot receive keyboard focus. Non-native collapse controls support Enter and Space, and all controls expose linked aria-expanded/aria-controls state. These lifecycle fixes require a development build until the next main release.

JavaScript

const sidebar = Sidebar.init('#mySidebar', { accordion: false })
// Before unmounting application content:
sidebar?.destroy()
// Or: Sidebar.destroy('#mySidebar')

Toggle Visibility (Mobile)

JavaScript

Sidebar.toggle('#mySidebar')
Sidebar.open('#mySidebar')
Sidebar.close('#mySidebar')

Collapsible Items

JavaScript

Sidebar.toggleItem('.focus-sidebar-item')
Sidebar.expand('.focus-sidebar-item')
Sidebar.collapse('.focus-sidebar-item')

Methods

Method	Description
`Sidebar.init(selector, options)`	Initialize collapsible items; returns an API with destroy, or null for a missing container. Auto-called on page load.
`Sidebar.destroy(container)`	Remove delegated handlers for this scope. Omit container for the document scope. Detached explicit hosts also clean up automatically in development builds.
`Sidebar.toggle(selector)`	Toggle sidebar visibility (mobile overlay)
`Sidebar.open(selector)`	Open the sidebar
`Sidebar.close(selector)`	Close the sidebar
`Sidebar.toggleItem(selector)`	Toggle nested item expansion
`Sidebar.expand(selector)`	Expand a nested item
`Sidebar.collapse(selector)`	Collapse a nested item

Options

Option	Type	Default	Description
`accordion`	boolean	`true`	Only one item can be expanded at a time
`scope`	string	`'sidebar'`	Accordion scope: `'sidebar'` (entire) or `'section'` (per section)
`expandActiveGroup`	boolean	`true`	Auto-expand group containing the active page

CSS Classes Reference

Class	Description
`.focus-sidebar`	Base sidebar class
`.focus-sidebar-dark`	Dark theme variant
`.focus-sidebar-narrow`	Narrow width (200px)
`.focus-sidebar-wide`	Wide width (320px)
`.focus-sidebar-open`	Mobile sidebar visible state
`.focus-sidebar-header`	Header section
`.focus-sidebar-footer`	Footer section
`.focus-sidebar-nav`	Navigation container
`.focus-sidebar-section`	Section with header
`.focus-sidebar-item`	Navigation item
`.focus-sidebar-item-active`	Active/selected state
`.focus-sidebar-item-nested`	Nested item (indented)
`.focus-sidebar-item-wrapper`	Container for collapsible items
`.focus-sidebar-item-with-toggle`	Item with adjacent collapse toggle
`.focus-sidebar-collapse-toggle`	Chevron button to toggle collapse
`.focus-sidebar-collapsible-items`	Container for nested collapsible items