Sidebar

A Tailwind CSS sidebar component for building application layouts with collapsible navigation.

<div class="sidebar">
  <div class="sidebar-backdrop"></div>
  <aside class="sidebar-panel">
    <div class="sidebar-content">
      <nav>...</nav>
    </div>
  </aside>
  <main class="flex-1">
    <p>Your content here</p>
  </main>
</div>

Left sidebar

By default, sidebars are positioned on the left side.

<div class="sidebar">
  <div class="sidebar-backdrop"></div>
  <aside class="sidebar-panel" id="my-sidebar">
    <div class="sidebar-content">
      <div class="font-semibold mb-4">Acme Inc</div>
      <nav class="flex flex-col gap-1">
        <a href="#" class="btn btn-ghost justify-start">Dashboard</a>
        <a href="#" class="btn btn-ghost justify-start">Projects</a>
        <a href="#" class="btn btn-ghost justify-start">Settings</a>
      </nav>
    </div>
  </aside>
  <main class="flex-1">
    <header class="flex items-center gap-4 border-b p-4">
      <button
        class="btn btn-outline btn-icon"
        data-sp-toggle="sidebar"
        data-sp-target="#my-sidebar"
      >
        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
      </button>
      <h1>Dashboard</h1>
    </header>
    <div class="p-6">
      <p>Main content goes here.</p>
    </div>
  </main>
</div>

Right sidebar

Use sidebar-right for a sidebar on the right side.

<div class="sidebar">
  <div class="sidebar-backdrop"></div>
  <main class="flex-1">
    <p>Main content</p>
  </main>
  <aside class="sidebar-panel sidebar-right" id="right-sidebar">
    <div class="sidebar-content">
      <div class="font-semibold mb-4">Inspector</div>
      <nav class="flex flex-col gap-1">
        <a href="#" class="btn btn-ghost justify-start">Properties</a>
        <a href="#" class="btn btn-ghost justify-start">Styles</a>
        <a href="#" class="btn btn-ghost justify-start">Layers</a>
      </nav>
    </div>
  </aside>
</div>

Both sidebars

You can use both left and right sidebars together.

<div class="sidebar">
  <div class="sidebar-backdrop"></div>
  <aside class="sidebar-panel" id="left-sidebar">
    <div class="sidebar-content">
      <div class="font-semibold mb-4">Navigation</div>
      <nav>...</nav>
    </div>
  </aside>
  <main class="flex-1">
    <p>Main content</p>
  </main>
  <aside class="sidebar-panel sidebar-right" id="right-sidebar">
    <div class="sidebar-content">
      <div class="font-semibold mb-4">Inspector</div>
      <nav>...</nav>
    </div>
  </aside>
</div>

Disabling animations

Add the no-animation class to disable animations.

<aside class="sidebar-panel no-animation">
  <div class="sidebar-content">
    ...
  </div>
</aside>

How it works

The sidebar component provides a layout system with collapsible sidebars that work differently on mobile and desktop.

Structure

A sidebar layout consists of these parts:

.sidebar - Root container with flex layout and min-height
.sidebar-backdrop - Overlay shown on mobile when sidebar is open
.sidebar-panel - The sidebar panel element (defaults to left positioning)
.sidebar-content - Sticky inner wrapper for sidebar content

<div class="sidebar">
  <div class="sidebar-backdrop"></div>
  <aside class="sidebar-panel">
    <div class="sidebar-content">
      <!-- Sidebar content -->
    </div>
  </aside>
  <main class="flex-1">
    <!-- Page content -->
  </main>
</div>

Responsive behavior

The sidebar behaves differently based on screen size:

Desktop (1024px and up): Sidebars are in-flow elements that push the main content. Toggling collapses/expands the sidebar using negative margins.
Mobile (below 1024px): Sidebars are fixed overlays that slide in from the edge with a backdrop.

The breakpoint can be customized via the --breakpoint-sidebar CSS variable:

@theme inline {
  --breakpoint-sidebar: 1024px;
}

Opening and closing

Use data attributes to control the sidebar without writing JavaScript.

To toggle a sidebar, add data-sp-toggle="sidebar" and data-sp-target to a button:

<button data-sp-toggle="sidebar" data-sp-target="#my-sidebar">
  Toggle Sidebar
</button>

Clicking the backdrop or pressing Escape closes the mobile sidebar.

For programmatic control, import the sidebar module:

import { open, close, toggle } from "starting-point-ui/sidebar";
 
const sidebarPanel = document.querySelector("#my-sidebar");
 
toggle(sidebarPanel);
open(sidebarPanel);
close(sidebarPanel);

Animation

The sidebar includes default animations. When opened on mobile, the JavaScript sets data-state="open" on the panel and backdrop. When closing, it sets data-state="closed" and waits for animations to complete before hiding the elements.

To disable animations, add no-animation to the sidebar panel:

<aside class="sidebar-panel no-animation">
  <div class="sidebar-content">
    <!-- Content -->
  </div>
</aside>

Class reference

All available classes for the sidebar component.

Class	Description
`sidebar`	Root container with flex layout and min-height
`sidebar-panel`	Main sidebar panel element, left-positioned by default
`sidebar-left`	Explicit left positioning (applied by default)
`sidebar-right`	Right positioning with right border
`sidebar-content`	Sticky inner wrapper with padding and overflow scroll
`sidebar-backdrop`	Mobile overlay backdrop
`no-animation`	Disables default animations on panel or backdrop

<div class="sidebar">
  <div class="sidebar-backdrop"></div>
  <aside class="sidebar-panel sidebar-right">
    <div class="sidebar-content">
      <!-- Content -->
    </div>
  </aside>
  <main class="flex-1">
    <!-- Content -->
  </main>
</div>

Data attributes

All data attributes for the sidebar component.

Attribute	Description
`data-sp-toggle="sidebar"`	Add to a button to toggle the sidebar panel
`data-sp-target="#id"`	Specifies which sidebar panel to toggle
`data-state`	Set to `open` or `closed` on panel and backdrop

<button data-sp-toggle="sidebar" data-sp-target="#my-sidebar">
  Toggle
</button>
 
<aside class="sidebar-panel" id="my-sidebar">
  <div class="sidebar-content">
    <!-- Content -->
  </div>
</aside>