Sidebar

A flexible navigation sidebar component with support for nested items, dark/light themes, and mobile-responsive behavior.

Features

CSS-only basic navigation (no JavaScript required)
Collapsible nested items (requires JavaScript)
Dark and light theme variants
Multiple width options
Mobile-responsive with overlay
Active state highlighting
Custom scrollbar styling

Basic Sidebar

A simple sidebar with navigation items:

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>
    <a href="#" class="focus-sidebar-item">
      <i class="fa fa-cog"></i>
      <span>Settings</span>
    </a>
  </nav>
</aside>

Dark Theme

Add .focus-sidebar-dark for a dark theme:

Main content area

HTML

<aside class="focus-sidebar focus-sidebar-dark">
  <!-- Same structure as basic sidebar -->
</aside>

Sidebar Sections

Organize items into sections with headers:

Main content area

HTML

<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>Dashboard</span>
    </a>
  </div>
  <div class="focus-sidebar-section">
    <h4>Management</h4>
    <a href="#" class="focus-sidebar-item">
      <i class="fa fa-users"></i>
      <span>Users</span>
    </a>
  </div>
</nav>

Nested Items JS Required

Create collapsible nested menu items:

Main content area

HTML

<div class="focus-sidebar-item focus-sidebar-item-expanded">
  <button class="focus-sidebar-toggle" data-focus-sidebar-toggle>
    <i class="fa fa-cube"></i>
    <span>Components</span>
    <i class="fa fa-chevron-down toggle-icon"></i>
  </button>
  <div class="focus-sidebar-submenu">
    <a href="#" class="focus-sidebar-item">Buttons</a>
    <a href="#" class="focus-sidebar-item">Modals</a>
    <a href="#" class="focus-sidebar-item">Forms</a>
  </div>
</div>

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>

JavaScript API

Sidebar.toggle(element)

Toggle sidebar visibility (mobile):

JavaScript

FocusUI.Sidebar.toggle('#mySidebar')

Sidebar.toggleItem(element)

Toggle nested item expansion:

JavaScript

FocusUI.Sidebar.toggleItem('.focus-sidebar-item')

Data Attributes

Attribute	Element	Description
`data-focus-sidebar-toggle`	Button	Toggles the parent sidebar item (nested menus)
`data-focus-sidebar-mobile="#id"`	Button	Toggles sidebar visibility on mobile

CSS Classes Reference

Class	Description
`.focus-sidebar`	Base sidebar class (required)
`.focus-sidebar-dark`	Dark theme variant
`.focus-sidebar-narrow`	Narrow width (200px)
`.focus-sidebar-wide`	Wide width (320px)
`.focus-sidebar-sticky`	Sticky positioning
`.focus-sidebar-header`	Sidebar header section
`.focus-sidebar-footer`	Sidebar footer section
`.focus-sidebar-nav`	Navigation container
`.focus-sidebar-section`	Section grouping with header
`.focus-sidebar-item`	Navigation item
`.focus-sidebar-item-active`	Active/selected state
`.focus-sidebar-item-expanded`	Expanded state for nested items (JS)
`.focus-sidebar-toggle`	Toggle button for nested items
`.focus-sidebar-submenu`	Nested submenu container
`.focus-sidebar-open`	Mobile sidebar open state

Mobile Responsive

On mobile screens (≤ 768px), the sidebar automatically becomes a fixed overlay that slides in from the left. Use data-focus-sidebar-mobile on a button to toggle it.

Mobile Behavior

The sidebar is hidden by default on mobile and can be opened with a toggle button. Clicking outside the sidebar or on a navigation link will close it automatically.