Sidebar

A collapsible sidebar navigation component with mobile toggle support.

The sidebar provides a responsive navigation panel that can be toggled open/closed. It supports mobile overlay mode, desktop persistent mode, collapsible submenus, and active page highlighting.

Basic Sidebar

Main content area

    <.sidebar id="main-sidebar">
  <:header>
    <div class="flex items-center gap-2 p-4">
      <span class="font-semibold">My App</span>
    </div>
  </:header>

  <.sidebar_group label="Navigation">
    <.sidebar_item href="/" current>Home</.sidebar_item>
    <.sidebar_item href="/dashboard">Dashboard</.sidebar_item>
    <.sidebar_item href="/settings">Settings</.sidebar_item>
  </.sidebar_group>
</.sidebar>
  

With Collapsible Submenu

Use sidebar_submenu for collapsible sections within the sidebar.

Collapsible Submenu

Main content area

    <.sidebar id="nav-sidebar">
  <.sidebar_group label="Navigation">
    <.sidebar_item href="/">Overview</.sidebar_item>

    <.sidebar_submenu label="Projects" open>
      <.sidebar_item href="/projects/active">Active</.sidebar_item>
      <.sidebar_item href="/projects/archived">Archived</.sidebar_item>
    </.sidebar_submenu>

    <.sidebar_item href="/team">Team</.sidebar_item>
  </.sidebar_group>
</.sidebar>
  

With Header and Footer

Add header and footer slots for branding and secondary actions.

Header and Footer

Main content area

    <.sidebar id="app-sidebar">
  <:header>
    <div class="flex items-center gap-2 p-4">
      <img src="/logo.svg" class="w-8 h-8" />
      <span class="font-semibold">My App</span>
    </div>
  </:header>

  <.sidebar_group label="Main">
    <.sidebar_item href="/">Home</.sidebar_item>
    <.sidebar_item href="/projects">Projects</.sidebar_item>
  </.sidebar_group>

  <:footer>
    <.sidebar_item href="/settings">Settings</.sidebar_item>
  </:footer>
</.sidebar>
  

Programmatic Control

Control the sidebar state from JavaScript using custom events:

    Programmatic Control
  

    // Toggle sidebar
document.dispatchEvent(new CustomEvent('sutra-ui:sidebar', {
  detail: { id: 'main-sidebar' }
}));

// Open sidebar
document.dispatchEvent(new CustomEvent('sutra-ui:sidebar', {
  detail: { id: 'main-sidebar', action: 'open' }
}));

// Close sidebar
document.dispatchEvent(new CustomEvent('sutra-ui:sidebar', {
  detail: { id: 'main-sidebar', action: 'close' }
}));
  

Accessibility

The sidebar component includes comprehensive accessibility features:

Uses semantic <aside> and <nav> elements
Proper ARIA labels and aria-hidden state
Sets inert attribute when closed to prevent keyboard navigation
Active page links marked with aria-current="page"