Examples

Sidebar

A Tailwind CSS sidebar component for building dashboards, admin panels, and application layouts. See more sidebar examples.

Sidebar component

<div class="sidebar">
  <div class="sidebar-backdrop"></div>
  <aside class="sidebar-panel">
    <div class="sidebar-content">
      <header class="sidebar-header">...</header>
      <nav class="sidebar-menu">...</nav>
      <footer class="sidebar-footer">...</footer>
    </div>
  </aside>
  <main class="sidebar-page">
    <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">
      <header class="sidebar-header">
        <div class="menu-btn menu-btn-lg">Acme Inc</div>
      </header>
      <nav class="sidebar-menu">
        <div class="menu-group">
          <a href="#" class="menu-btn">Dashboard</a>
          <a href="#" class="menu-btn">Projects</a>
          <a href="#" class="menu-btn">Settings</a>
        </div>
      </nav>
    </div>
  </aside>
  <main class="sidebar-page">
    <header class="flex items-center gap-4 border-b p-4">
      <button
        class="btn btn-icon"
        data-sp-toggle="sidebar"
        data-sp-target="#my-sidebar"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

Inset sidebar

Use sidebar-inset for a sidebar with an inset main content area.

<div class="sidebar sidebar-inset">
  <div class="sidebar-backdrop"></div>
  <aside class="sidebar-panel" id="my-sidebar">
    <div class="sidebar-content">...</div>
  </aside>
  <main class="sidebar-page">
    <p>Main content with rounded corners and shadow</p>
  </main>
</div>

Right sidebar

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

<div class="sidebar">
  <div class="sidebar-backdrop"></div>
  <main class="sidebar-page">
    <p>Main content</p>
  </main>
  <aside class="sidebar-panel sidebar-right" id="right-sidebar">
    <div class="sidebar-content">
      <header class="sidebar-header">
        <div class="menu-btn menu-btn-lg">Inspector</div>
      </header>
      <nav class="sidebar-menu">
        <div class="menu-group">
          <a href="#" class="menu-btn">Properties</a>
          <a href="#" class="menu-btn">Styles</a>
          <a href="#" class="menu-btn">Layers</a>
        </div>
      </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">
      <header class="sidebar-header">
        <div class="menu-btn menu-btn-lg">Navigation</div>
      </header>
      <nav class="sidebar-menu">...</nav>
    </div>
  </aside>
  <main class="sidebar-page">
    <p>Main content</p>
  </main>
  <aside class="sidebar-panel sidebar-right" id="right-sidebar">
    <div class="sidebar-content">
      <header class="sidebar-header">
        <div class="menu-btn menu-btn-lg">Inspector</div>
      </header>
      <nav class="sidebar-menu">...</nav>
    </div>
  </aside>
</div>

Menu structure

The sidebar menu uses a structured hierarchy of groups, labels, and buttons.

<nav class="sidebar-menu">
  <div class="menu-group">
    <span class="menu-label">Platform</span>
    <a href="#" class="menu-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
      Dashboard
    </a>
    <a href="#" class="menu-btn active">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
      Settings
    </a>
  </div>
  <div class="menu-group">
    <span class="menu-label">Projects</span>
    <a href="#" class="menu-btn">Design Engineering</a>
    <a href="#" class="menu-btn">Sales &amp; Marketing</a>
  </div>
</nav>

Nested menus

Use menu-subgroup for nested navigation items. This works with the collapsible component to show/hide submenus. See it in action in the first sidebar example.

<nav class="sidebar-menu">
  <div class="menu-group">
    <button
      class="menu-btn"
      data-sp-toggle="collapsible"
      data-sp-target="#submenu"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/></svg>
      Playground
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-auto transition-transform in-aria-expanded:rotate-90"><path d="m9 18 6-6-6-6"/></svg>
    </button>
    <div id="submenu" class="collapsible-panel open">
      <div class="menu-subgroup">
        <a href="#" class="menu-btn menu-btn-sm">History</a>
        <a href="#" class="menu-btn menu-btn-sm">Starred</a>
        <a href="#" class="menu-btn menu-btn-sm">Settings</a>
      </div>
    </div>
  </div>
</nav>

Button sizes

Menu buttons come in three sizes.

<a href="#" class="menu-btn menu-btn-sm">Small</a>
<a href="#" class="menu-btn">Base (default)</a>
<a href="#" class="menu-btn menu-btn-lg">Large</a>

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:

  1. .sidebar - Root container with flex layout and min-height
  2. .sidebar-backdrop - Overlay shown on mobile when sidebar is open
  3. .sidebar-panel - The sidebar panel element (defaults to left positioning)
  4. .sidebar-content - Sticky inner wrapper for sidebar content
  5. .sidebar-page - Main content area
<div class="sidebar">
  <div class="sidebar-backdrop"></div>
  <aside class="sidebar-panel">
    <div class="sidebar-content">
      <!-- Sidebar content -->
    </div>
  </aside>
  <main class="sidebar-page">
    <!-- 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.

ClassDescription
sidebarRoot container with flex layout and min-height
sidebar-insetModifier for inset layout with rounded main content
sidebar-panelMain sidebar panel element, left-positioned by default
sidebar-leftExplicit left positioning (applied by default)
sidebar-rightRight positioning with right border
sidebar-contentSticky inner wrapper for sidebar content
sidebar-headerHeader section with padding
sidebar-menuScrollable menu container
sidebar-footerFooter section with padding, pushed to bottom
sidebar-pageMain content area
sidebar-backdropMobile overlay backdrop
menu-groupGroup container for menu items
menu-subgroupNested group with left border
menu-labelSection label text
menu-btnMenu button/link with hover states
menu-btn-smSmall menu button
menu-btn-baseBase menu button size (default)
menu-btn-lgLarge menu button
menu-itemNon-interactive menu item without hover/active states
menu-item-smSmall menu item
menu-item-lgLarge menu item
no-animationDisables default animations

Data attributes

All data attributes for the sidebar component.

AttributeDescription
data-sp-toggle="sidebar"Add to a button to toggle the sidebar panel
data-sp-target="#id"Specifies which sidebar panel to toggle
data-stateSet to open or closed on panel and backdrop