Sidebar

The sidebar places your navigation in a column beside the page, the standard layout for dashboards, admin panels, and apps with many destinations. It collapses out of the way when the content needs room, and becomes a drawer on mobile.

<div class="sidebar-container">
  <aside
    class="sidebar"
    data-sp-collapse="icon"
    data-sp-toggle="#sidebar-demo-trigger"
  >
    <header class="sidebar-header">
      <button
        id="team-trigger"
        class="sidebar-menu-button sidebar-menu-button-lg"
        aria-expanded="false"
      >
        <span
          class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
        >
          <i class="font-serif font-bold not-italic">A</i>
        </span>
        <span class="grid min-w-0 flex-1 text-left leading-tight">
          <span class="truncate text-sm font-medium">Acme Inc.</span>
          <span class="truncate text-xs text-muted-foreground">Enterprise</span>
        </span>
        <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </button>
      <div
        id="team-menu"
        class="dropdown min-w-56"
        data-sp-toggle="#team-trigger"
        data-sp-placement="right-start"
      >
        <div class="dropdown-label text-xs text-muted-foreground">Teams</div>
        <a href="#" class="dropdown-item">Acme Inc</a>
        <a href="#" class="dropdown-item">Acme Corp.</a>
        <div class="dropdown-separator"></div>
        <a href="#" class="dropdown-item">
          <svg 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"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
          Add team
        </a>
      </div>
    </header>
    <div class="sidebar-content">
      <div class="sidebar-group">
        <span class="sidebar-group-label">Platform</span>
        <nav class="sidebar-menu">
          <div class="sidebar-menu-item">
            <button
              id="playground-trigger"
              class="sidebar-menu-button"
              aria-expanded="true"
            >
              <svg 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"><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>
              <span>Playground</span>
              <svg 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" class="ml-auto in-aria-expanded:rotate-90"><path d="m9 18 6-6-6-6"/></svg>
            </button>
            <div
              class="collapsible expanded"
              data-sp-toggle="#playground-trigger"
            >
              <ul class="sidebar-menu-sub">
                <li class="sidebar-menu-sub-item">
                  <a href="#" class="sidebar-menu-sub-button">
                    <span>History</span>
                  </a>
                </li>
                <li class="sidebar-menu-sub-item">
                  <a href="#" class="sidebar-menu-sub-button">
                    <span>Settings</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Models, Documentation, etc. are collapsibles like Playground above -->
          <div class="sidebar-menu-item">
            <button class="sidebar-menu-button">
              <svg 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"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
              <span>Models</span>
              <svg 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" class="ml-auto"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </div>
          <div class="sidebar-menu-item">
            <button class="sidebar-menu-button">
              <svg 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"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
              <span>Documentation</span>
              <svg 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" class="ml-auto"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </div>
        </nav>
      </div>
      <div
        class="sidebar-group in-[.sidebar.collapsed[data-sp-collapse=icon]]:hidden"
      >
        <span class="sidebar-group-label">Projects</span>
        <nav class="sidebar-menu">
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>
              <span>Sales &amp; Marketing</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>
              <span>Travel</span>
            </a>
          </div>
        </nav>
      </div>
    </div>
    <footer class="sidebar-footer">
      <button
        id="user-trigger"
        class="sidebar-menu-button sidebar-menu-button-lg"
        aria-expanded="false"
      >
        <span class="avatar size-8 rounded-lg">
          <img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100"
            alt="Leila Navarro"
          />
          <span class="avatar-fallback">LN</span>
        </span>
        <span class="grid flex-1 text-left leading-tight">
          <span class="truncate font-medium">Leila Navarro</span>
          <span class="truncate text-xs">[email protected]</span>
        </span>
        <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </button>
      <div
        id="user-menu"
        class="dropdown min-w-56"
        data-sp-toggle="#user-trigger"
        data-sp-placement="right-end"
      >
        <a href="#" class="dropdown-item">Account</a>
        <a href="#" class="dropdown-item">Billing</a>
        <a href="#" class="dropdown-item">Notifications</a>
        <div class="dropdown-separator"></div>
        <a href="#" class="dropdown-item">Log out</a>
      </div>
    </footer>
  </aside>
  <main class="sidebar-page flex flex-col">
    <header class="flex h-16 items-center gap-2 px-4">
      <button
        id="sidebar-demo-trigger"
        class="btn btn-ghost btn-icon"
        aria-label="Toggle sidebar"
      >
        <svg 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 class="text-sm font-medium">Dashboard</h1>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
      </div>
      <div class="flex-1 rounded-xl bg-muted/50"></div>
    </div>
  </main>
</div>

Usage

Add the sidebar class to an <aside> element and pair it with a sidebar-page content area inside a sidebar-container root. Point the sidebar at its trigger with data-sp-toggle: on desktop the trigger collapses the column in place, on mobile it opens the sidebar as a drawer.

Inside, the sidebar is a flex column: sidebar-content scrolls in the middle while an optional sidebar-header and sidebar-footer stay pinned. Their contents are up to you, typically a brand row up top, grouped menus of links, and a user row at the bottom.

Class	Description
`sidebar-container`	Add to the root element wrapping the sidebar and page
`sidebar`	Add to an `<aside>` element to create the sidebar; carries `data-sp-toggle`
`sidebar-header`	Add for a pinned region at the top of the sidebar
`sidebar-input`	Add to an `input` for a search field that fits the sidebar
`sidebar-content`	Add for the scrollable middle of the sidebar
`sidebar-group`	Add to create a labelled section of the content
`sidebar-group-label`	Add to the group's heading
`sidebar-group-content`	Add to the wrapper around the group's menu
`sidebar-menu`	Add to a `<nav>` element to create a menu
`sidebar-menu-item`	Add to each row in the menu
`sidebar-menu-button`	Add to the link or button in a row; `active` marks the current page
`sidebar-footer`	Add for a pinned region at the bottom of the sidebar
`sidebar-page`	Add to the `<main>` content area beside the sidebar

<div class="sidebar-container">
  <!-- The sidebar, pointing at its trigger -->
  <aside class="sidebar" data-sp-toggle="#sidebar-trigger">
    <!-- Pinned at the top, typically a brand row -->
    <header class="sidebar-header">
      <a href="#" class="sidebar-menu-button sidebar-menu-button-lg">...</a>
    </header>
 
    <!-- The scrollable middle with the navigation -->
    <div class="sidebar-content">
      <div class="sidebar-group">
        <span class="sidebar-group-label">Platform</span>
        <div class="sidebar-group-content">
          <nav class="sidebar-menu">
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button active">
                <span>Dashboard</span>
              </a>
            </div>
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button">
                <span>Projects</span>
              </a>
            </div>
          </nav>
        </div>
      </div>
    </div>
 
    <!-- Pinned at the bottom, typically a user row -->
    <footer class="sidebar-footer">
      <button class="sidebar-menu-button sidebar-menu-button-lg">...</button>
    </footer>
  </aside>
 
  <!-- The page content beside the sidebar, holding the trigger -->
  <main class="sidebar-page">
    <button
      id="sidebar-trigger"
      class="btn btn-ghost btn-icon"
      aria-label="Toggle sidebar"
    >
      ...
    </button>
    ...
  </main>
</div>

Examples

Icon collapse

Set data-sp-collapse="icon" on the panel to shrink it to a rail of icons. Each button needs a leading icon and a <span> label; the rail keeps the icon and shows the label in a tooltip on hover.

<div class="sidebar-container">
  <aside class="sidebar" data-sp-collapse="icon" data-sp-toggle="#icon-trigger">
    <header class="sidebar-header">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span
          class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
        >
          <i class="font-serif font-bold not-italic">A</i>
        </span>
        <span class="grid min-w-0 flex-1 text-left leading-tight">
          <span class="truncate text-sm font-medium">Acme Inc.</span>
          <span class="truncate text-xs text-muted-foreground">Enterprise</span>
        </span>
        <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </button>
    </header>
    <div class="sidebar-content">
      <div class="sidebar-group">
        <nav class="sidebar-menu">
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button active">
              <svg 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="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
              <span>Dashboard</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>
              <span>Sales &amp; Marketing</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>
              <span>Travel</span>
            </a>
          </div>
        </nav>
      </div>
    </div>
    <footer class="sidebar-footer">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span class="avatar size-8 rounded-lg">
          <img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100"
            alt="Leila Navarro"
          />
          <span class="avatar-fallback">LN</span>
        </span>
        <span class="grid flex-1 text-left leading-tight">
          <span class="truncate font-medium">Leila Navarro</span>
          <span class="truncate text-xs">[email protected]</span>
        </span>
        <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </button>
    </footer>
  </aside>
  <main class="sidebar-page flex flex-col">
    <header class="flex h-16 items-center gap-2 px-4">
      <button
        id="icon-trigger"
        class="btn btn-ghost btn-icon"
        aria-label="Toggle sidebar"
      >
        <svg 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 class="text-sm font-medium">Dashboard</h1>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
      </div>
      <div class="flex-1 rounded-xl bg-muted/50"></div>
    </div>
  </main>
</div>

Offcanvas collapse

data-sp-collapse="offcanvas" (the default) slides the panel fully off-screen and the page reclaims the space.

<div class="sidebar-container">
  <aside
    class="sidebar"
    data-sp-collapse="offcanvas"
    data-sp-toggle="#offcanvas-trigger"
  >
    <header class="sidebar-header">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span
          class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
        >
          <i class="font-serif font-bold not-italic">A</i>
        </span>
        <span class="grid min-w-0 flex-1 text-left leading-tight">
          <span class="truncate text-sm font-medium">Acme Inc.</span>
          <span class="truncate text-xs text-muted-foreground">Enterprise</span>
        </span>
        <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </button>
    </header>
    <div class="sidebar-content">
      <div class="sidebar-group">
        <nav class="sidebar-menu">
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button active">
              <svg 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="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
              <span>Dashboard</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>
              <span>Sales &amp; Marketing</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>
              <span>Travel</span>
            </a>
          </div>
        </nav>
      </div>
    </div>
    <footer class="sidebar-footer">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span class="avatar size-8 rounded-lg">
          <img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100"
            alt="Leila Navarro"
          />
          <span class="avatar-fallback">LN</span>
        </span>
        <span class="grid flex-1 text-left leading-tight">
          <span class="truncate font-medium">Leila Navarro</span>
          <span class="truncate text-xs">[email protected]</span>
        </span>
        <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </button>
    </footer>
  </aside>
  <main class="sidebar-page flex flex-col">
    <header class="flex h-16 items-center gap-2 px-4">
      <button
        id="offcanvas-trigger"
        class="btn btn-ghost btn-icon"
        aria-label="Toggle sidebar"
      >
        <svg 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 class="text-sm font-medium">Dashboard</h1>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
      </div>
      <div class="flex-1 rounded-xl bg-muted/50"></div>
    </div>
  </main>
</div>

Initially collapsed

Add the collapsed class to the panel to render it collapsed on first paint.

<div class="sidebar-container">
  <aside
    class="sidebar collapsed"
    data-sp-collapse="icon"
    data-sp-toggle="#collapsed-trigger"
  >
    <header class="sidebar-header">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span
          class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
        >
          <i class="font-serif font-bold not-italic">A</i>
        </span>
        <span class="grid min-w-0 flex-1 text-left leading-tight">
          <span class="truncate text-sm font-medium">Acme Inc.</span>
          <span class="truncate text-xs text-muted-foreground">Enterprise</span>
        </span>
      </button>
    </header>
    <div class="sidebar-content">
      <div class="sidebar-group">
        <nav class="sidebar-menu">
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button active">
              <svg 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="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
              <span>Dashboard</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>
              <span>Sales &amp; Marketing</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>
              <span>Travel</span>
            </a>
          </div>
        </nav>
      </div>
    </div>
    <footer class="sidebar-footer">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span class="avatar size-8 rounded-lg">
          <img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100"
            alt="Leila Navarro"
          />
          <span class="avatar-fallback">LN</span>
        </span>
        <span class="grid flex-1 text-left leading-tight">
          <span class="truncate font-medium">Leila Navarro</span>
          <span class="truncate text-xs">[email protected]</span>
        </span>
      </button>
    </footer>
  </aside>
  <main class="sidebar-page flex flex-col">
    <header class="flex h-16 items-center gap-2 px-4">
      <button
        id="collapsed-trigger"
        class="btn btn-ghost btn-icon"
        aria-label="Toggle sidebar"
      >
        <svg 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 class="text-sm font-medium">Dashboard</h1>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
      </div>
      <div class="flex-1 rounded-xl bg-muted/50"></div>
    </div>
  </main>
</div>

Right sidebar

A sidebar defaults to the left. Add sidebar-right to move it to the right instead.

<div class="sidebar-container">
  <aside
    class="sidebar sidebar-right"
    data-sp-collapse="offcanvas"
    data-sp-toggle="#right-trigger"
  >
    <header class="sidebar-header">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span
          class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
        >
          <i class="font-serif font-bold not-italic">A</i>
        </span>
        <span class="grid min-w-0 flex-1 text-left leading-tight">
          <span class="truncate text-sm font-medium">Acme Inc.</span>
          <span class="truncate text-xs text-muted-foreground">Enterprise</span>
        </span>
      </button>
    </header>
    <div class="sidebar-content">
      <div class="sidebar-group">
        <nav class="sidebar-menu">
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button active">
              <svg 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="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
              <span>Dashboard</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>
              <span>Sales &amp; Marketing</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>
              <span>Travel</span>
            </a>
          </div>
        </nav>
      </div>
    </div>
  </aside>
  <main class="sidebar-page flex flex-col">
    <header class="flex h-16 items-center justify-end gap-2 px-4">
      <h1 class="mr-auto text-sm font-medium">Dashboard</h1>
      <button
        id="right-trigger"
        class="btn btn-ghost btn-icon"
        aria-label="Toggle sidebar"
      >
        <svg 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="M15 3v18"/></svg>
      </button>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
      </div>
      <div class="flex-1 rounded-xl bg-muted/50"></div>
    </div>
  </main>
</div>

Two sidebars

A layout can hold two sidebars at once, for example navigation on the left and a table of contents on the right. Put both in the same sidebar-container, each with its own trigger, and they collapse independently.

<div class="sidebar-container">
  <aside
    class="sidebar"
    data-sp-collapse="offcanvas"
    data-sp-toggle="#nav-trigger"
  >
    <header class="sidebar-header">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span
          class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
        >
          <i class="font-serif font-bold not-italic">A</i>
        </span>
        <span class="grid min-w-0 flex-1 text-left leading-tight">
          <span class="truncate text-sm font-medium">Acme Inc.</span>
          <span class="truncate text-xs text-muted-foreground">Enterprise</span>
        </span>
      </button>
    </header>
    <div class="sidebar-content">
      <div class="sidebar-group">
        <nav class="sidebar-menu">
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button active">
              <svg 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="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
              <span>Dashboard</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>
              <span>Sales &amp; Marketing</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>
              <span>Travel</span>
            </a>
          </div>
        </nav>
      </div>
    </div>
  </aside>
  <main class="sidebar-page flex flex-col">
    <header class="flex h-16 items-center gap-2 px-4">
      <button
        id="nav-trigger"
        class="btn btn-ghost btn-icon"
        aria-label="Toggle navigation"
      >
        <svg 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 class="mr-auto text-sm font-medium">Dashboard</h1>
      <button
        id="toc-trigger"
        class="btn btn-ghost btn-icon"
        aria-label="Toggle table of contents"
      >
        <svg 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="M15 3v18"/></svg>
      </button>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="h-32 rounded-xl bg-muted/50"></div>
      <div class="flex-1 rounded-xl bg-muted/50"></div>
    </div>
  </main>
  <aside
    class="sidebar sidebar-right"
    data-sp-collapse="offcanvas"
    data-sp-toggle="#toc-trigger"
  >
    <div class="sidebar-content">
      <div class="sidebar-group">
        <span class="sidebar-group-label">On this page</span>
        <div class="sidebar-group-content">
          <nav class="sidebar-menu">
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button active">
                <span>Introduction</span>
              </a>
            </div>
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button">
                <span>Installation</span>
              </a>
            </div>
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button">
                <span>Usage</span>
              </a>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </aside>
</div>

Double sidebar

Nest two sidebar-static columns inside a single collapsible sidebar to build inbox-style layouts: a narrow icon rail for switching sections and a wider list beside it. Collapsing to icon mode leaves just the rail.

<div
  class="sidebar-container"
  style="--sidebar-width: 21.5rem; --sidebar-width-mobile: 21.5rem;"
>
  <aside
    class="sidebar flex-row overflow-hidden"
    data-sp-collapse="icon"
    data-sp-toggle="#double-trigger"
  >
    <div
      class="sidebar-static w-[calc(var(--sidebar-width-icon)+1px)] border-r"
    >
      <header class="sidebar-header">
        <a href="#" class="sidebar-menu-button sidebar-menu-button-lg h-8 p-0">
          <span
            class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
          >
            <i class="font-serif font-bold not-italic">A</i>
          </span>
        </a>
      </header>
      <div class="sidebar-content">
        <div class="sidebar-group">
          <nav class="sidebar-menu">
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button active">
                <svg 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"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
                <span class="sr-only">Inbox</span>
              </a>
            </div>
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button">
                <svg 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"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/></svg>
                <span class="sr-only">Drafts</span>
              </a>
            </div>
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button">
                <svg 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"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>
                <span class="sr-only">Sent</span>
              </a>
            </div>
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button">
                <svg 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="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="m9.5 17 5-5"/><path d="m9.5 12 5 5"/></svg>
                <span class="sr-only">Junk</span>
              </a>
            </div>
            <div class="sidebar-menu-item">
              <a href="#" class="sidebar-menu-button">
                <svg 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"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                <span class="sr-only">Trash</span>
              </a>
            </div>
          </nav>
        </div>
      </div>
      <footer class="sidebar-footer">
        <button class="sidebar-menu-button sidebar-menu-button-lg p-0">
          <span class="avatar rounded-lg">
            <img
              class="avatar-image"
              src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100"
              alt="Leila Navarro"
            />
            <span class="avatar-fallback">LN</span>
          </span>
          <span class="grid flex-1 text-left leading-tight">
            <span class="truncate font-medium">Leila Navarro</span>
            <span class="truncate text-xs">[email protected]</span>
          </span>
        </button>
      </footer>
    </div>
    <div class="sidebar-static flex-1">
      <header class="sidebar-header gap-3.5 border-b p-4">
        <div class="flex w-full items-center justify-between">
          <span class="text-base font-medium text-foreground">Inbox</span>
          <label class="label">
            Unreads
            <input type="checkbox" role="switch" class="switch shadow-none" />
          </label>
        </div>
        <input
          type="search"
          class="input sidebar-input"
          placeholder="Type to search..."
        />
      </header>
      <div class="sidebar-content">
        <div class="sidebar-group p-0">
          <div class="sidebar-group-content">
            <a
              href="#"
              class="flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
            >
              <span class="flex w-full items-center gap-2">
                William Smith
                <span class="ml-auto text-xs">09:34 AM</span>
              </span>
              <span class="font-medium">Meeting Tomorrow</span>
              <span class="line-clamp-2 text-xs whitespace-normal">
                Hi team, just a reminder about our meeting tomorrow at 10 AM.
                Please come prepared with your project updates.
              </span>
            </a>
            <a
              href="#"
              class="flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
            >
              <span class="flex w-full items-center gap-2">
                Alice Smith
                <span class="ml-auto text-xs">Yesterday</span>
              </span>
              <span class="font-medium">Re: Project Update</span>
              <span class="line-clamp-2 text-xs whitespace-normal">
                Thanks for the update. The progress looks great so far. Let's
                schedule a call to discuss the next steps.
              </span>
            </a>
            <a
              href="#"
              class="flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
            >
              <span class="flex w-full items-center gap-2">
                Bob Johnson
                <span class="ml-auto text-xs">2 days ago</span>
              </span>
              <span class="font-medium">Weekend Plans</span>
              <span class="line-clamp-2 text-xs whitespace-normal">
                Hey everyone! I'm thinking of organizing a team outing this
                weekend. Would you be interested in a hiking trip or a beach
                day?
              </span>
            </a>
            <a
              href="#"
              class="flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
            >
              <span class="flex w-full items-center gap-2">
                Emily Davis
                <span class="ml-auto text-xs">1 week ago</span>
              </span>
              <span class="font-medium">Re: Question about Budget</span>
              <span class="line-clamp-2 text-xs whitespace-normal">
                I've reviewed the budget numbers you sent over. Can we set up a
                quick call to discuss some potential adjustments?
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </aside>
  <main class="sidebar-page flex flex-col">
    <header class="flex h-16 items-center gap-2 px-4">
      <button
        id="double-trigger"
        class="btn btn-ghost btn-icon"
        aria-label="Toggle sidebar"
      >
        <svg 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 class="text-sm font-medium">Inbox</h1>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="h-32 rounded-xl bg-muted/50"></div>
      <div class="flex-1 rounded-xl bg-muted/50"></div>
    </div>
  </main>
</div>

Inset

Add sidebar-inset to the root for an inset main content area with rounded corners and a shadow. It pairs well with data-sp-collapse="icon", leaving the rail floating beside the inset page.

<div class="sidebar-container sidebar-inset">
  <aside
    class="sidebar"
    data-sp-collapse="icon"
    data-sp-toggle="#inset-trigger"
  >
    <header class="sidebar-header">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span
          class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
        >
          <i class="font-serif font-bold not-italic">A</i>
        </span>
        <span class="grid min-w-0 flex-1 text-left leading-tight">
          <span class="truncate text-sm font-medium">Acme Inc.</span>
          <span class="truncate text-xs text-muted-foreground">Enterprise</span>
        </span>
        <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </button>
    </header>
    <div class="sidebar-content">
      <div class="sidebar-group">
        <nav class="sidebar-menu">
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button active">
              <svg 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="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
              <span>Dashboard</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>
              <span>Sales &amp; Marketing</span>
            </a>
          </div>
          <div class="sidebar-menu-item">
            <a href="#" class="sidebar-menu-button">
              <svg 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"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>
              <span>Travel</span>
            </a>
          </div>
        </nav>
      </div>
    </div>
    <footer class="sidebar-footer">
      <button class="sidebar-menu-button sidebar-menu-button-lg">
        <span class="avatar size-8 rounded-lg">
          <img
            class="avatar-image"
            src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100"
            alt="Leila Navarro"
          />
          <span class="avatar-fallback">LN</span>
        </span>
        <span class="grid flex-1 text-left leading-tight">
          <span class="truncate font-medium">Leila Navarro</span>
          <span class="truncate text-xs">[email protected]</span>
        </span>
        <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </button>
    </footer>
  </aside>
  <main class="sidebar-page flex flex-col">
    <header class="flex h-16 items-center gap-2 px-4">
      <button
        id="inset-trigger"
        class="btn btn-ghost btn-icon"
        aria-label="Toggle sidebar"
      >
        <svg 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 class="text-sm font-medium">Dashboard</h1>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">
      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
        <div
          class="aspect-video rounded-xl bg-muted/50 max-md:aspect-auto max-md:h-40"
        ></div>
      </div>
      <div class="flex-1 rounded-xl bg-muted/50"></div>
    </div>
  </main>
</div>

Inside a dialog

Use sidebar-static for a non-collapsing column that embeds anywhere, like a settings dialog.

<button id="settings-trigger" class="btn btn-outline">Open Dialog</button>
 
<dialog class="dialog" data-sp-toggle="#settings-trigger">
  <div class="dialog-panel max-w-3xl gap-0 overflow-hidden p-0">
    <div class="flex h-[480px] items-start">
      <aside class="sidebar-static border-r">
        <div class="sidebar-content">
          <div class="sidebar-group">
            <nav class="sidebar-menu">
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
                  <span>Notifications</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
                  <span>Navigation</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>
                  <span>Home</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><path d="m14.622 17.897-10.68-2.913"/><path d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z"/><path d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"/></svg>
                  <span>Appearance</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button active">
                  <svg 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"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
                  <span>Messages &amp; media</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                  <span>Language &amp; region</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><path d="M10 8h.01"/><path d="M12 12h.01"/><path d="M14 8h.01"/><path d="M16 12h.01"/><path d="M18 8h.01"/><path d="M6 8h.01"/><path d="M7 16h10"/><path d="M8 12h.01"/><rect width="20" height="16" x="2" y="4" rx="2"/></svg>
                  <span>Accessibility</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><path d="M20 6 9 17l-5-5"/></svg>
                  <span>Mark as read</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
                  <span>Audio &amp; video</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                  <span>Connected accounts</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                  <span>Privacy &amp; visibility</span>
                </a>
              </div>
              <div class="sidebar-menu-item">
                <a href="#" class="sidebar-menu-button">
                  <svg 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"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                  <span>Advanced</span>
                </a>
              </div>
            </nav>
          </div>
        </div>
      </aside>
      <main class="flex h-[480px] flex-1 flex-col overflow-hidden">
        <header class="flex h-16 shrink-0 items-center gap-2 px-4">
          <nav class="breadcrumb text-sm">
            <a href="#" class="breadcrumb-link">Settings</a>
            <span class="breadcrumb-separator" aria-hidden="true">
              <svg 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"><path d="m9 18 6-6-6-6"/></svg>
            </span>
            <span class="breadcrumb-page">Messages &amp; media</span>
          </nav>
        </header>
        <div
          class="scrollbar scrollbar-sm flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0"
        >
          <div class="aspect-video max-w-lg rounded-xl bg-muted/50"></div>
          <div class="aspect-video max-w-lg rounded-xl bg-muted/50"></div>
          <div class="aspect-video max-w-lg rounded-xl bg-muted/50"></div>
          <div class="aspect-video max-w-lg rounded-xl bg-muted/50"></div>
        </div>
      </main>
    </div>
  </div>
</dialog>

A sidebar-menu is a list of sidebar-menu-items, each holding a sidebar-menu-button. Buttons can be links or buttons; add active to mark the current one. These classes work anywhere, not just inside a sidebar.

<aside class="sidebar-static">
  <div class="sidebar-group">
    <nav class="sidebar-menu">
      <div class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button active">
          <svg 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="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
          <span>Dashboard</span>
        </a>
      </div>
      <div class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">
          <svg 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"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg>
          <span>Sales &amp; Marketing</span>
        </a>
      </div>
      <div class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">
          <svg 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"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/></svg>
          <span>Travel</span>
        </a>
      </div>
    </nav>
  </div>
</aside>

Submenu

A sidebar-menu-sub is a nested list of sidebar-menu-sub-items.

<aside class="sidebar-static">
  <div class="sidebar-group">
    <nav class="sidebar-menu">
      <div class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">
          <svg 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"><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>
          <span>Playground</span>
        </a>
        <ul class="sidebar-menu-sub">
          <li class="sidebar-menu-sub-item">
            <a href="#" class="sidebar-menu-sub-button active">
              <span>History</span>
            </a>
          </li>
          <li class="sidebar-menu-sub-item">
            <a href="#" class="sidebar-menu-sub-button"><span>Starred</span></a>
          </li>
          <li class="sidebar-menu-sub-item">
            <a href="#" class="sidebar-menu-sub-button">
              <span>Settings</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</aside>

Wrap it in a collapsible to make it expandable, and nest them for a tree like a file explorer.

<aside class="sidebar-static">
  <div class="sidebar-group">
    <nav class="sidebar-menu">
      <div class="sidebar-menu-item">
        <button
          id="tree-components"
          class="sidebar-menu-button"
          aria-expanded="true"
        >
          <svg 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" class="text-muted-foreground transition-transform [[aria-expanded=true]>&]:rotate-90"><path d="m9 18 6-6-6-6"/></svg>
          <svg 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"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
          <span>components</span>
        </button>
        <div class="collapsible expanded" data-sp-toggle="#tree-components">
          <div class="collapsible-content">
            <ul class="sidebar-menu-sub">
              <li class="sidebar-menu-sub-item">
                <button
                  id="tree-icons"
                  class="sidebar-menu-sub-button w-full"
                  aria-expanded="true"
                >
                  <svg 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" class="text-muted-foreground transition-transform [[aria-expanded=true]>&]:rotate-90"><path d="m9 18 6-6-6-6"/></svg>
                  <svg 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"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
                  <span>icons</span>
                </button>
                <div class="collapsible expanded" data-sp-toggle="#tree-icons">
                  <div class="collapsible-content">
                    <ul class="sidebar-menu-sub">
                      <li class="sidebar-menu-sub-item">
                        <a href="#" class="sidebar-menu-sub-button">
                          <svg 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" class="text-muted-foreground"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
                          <span>chevron.tsx</span>
                        </a>
                      </li>
                      <li class="sidebar-menu-sub-item">
                        <a href="#" class="sidebar-menu-sub-button">
                          <svg 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" class="text-muted-foreground"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
                          <span>folder.tsx</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li class="sidebar-menu-sub-item">
                <a href="#" class="sidebar-menu-sub-button">
                  <svg 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" class="text-muted-foreground"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
                  <span>accordion.tsx</span>
                </a>
              </li>
              <li class="sidebar-menu-sub-item">
                <a href="#" class="sidebar-menu-sub-button">
                  <svg 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" class="text-muted-foreground"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
                  <span>collapsible.tsx</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
</aside>

Use sidebar-menu-button-sm or sidebar-menu-button-lg for smaller or larger rows. The large size suits brand rows with a logo or avatar.

<aside class="sidebar-static">
  <div class="sidebar-group">
    <nav class="sidebar-menu">
      <div class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button sidebar-menu-button-sm">
          <svg 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"><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>
          <span>Settings</span>
        </a>
      </div>
      <div class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">
          <svg 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"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>
          <span>Home</span>
        </a>
      </div>
      <div class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button sidebar-menu-button-lg">
          <span
            class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
          >
            <i class="font-serif font-bold not-italic">A</i>
          </span>
          <span class="grid min-w-0 flex-1 text-left leading-tight">
            <span class="truncate text-sm font-medium">Acme Inc.</span>
            <span class="truncate text-xs text-muted-foreground">
              Enterprise
            </span>
          </span>
        </a>
      </div>
    </nav>
  </div>
</aside>

Group

Wrap a labelled section of the menu in a sidebar-group with a sidebar-group-label. Stack multiple groups to organize the menu, and add a sidebar-group-action in the label row, for example to open a dropdown.

<aside class="sidebar-static">
  <div class="sidebar-group">
    <span class="sidebar-group-label">Projects</span>
    <button
      id="group-action"
      class="sidebar-group-action"
      aria-label="Add project"
    >
      <svg 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"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
    </button>
    <div
      id="group-action-menu"
      class="dropdown w-44"
      data-sp-toggle="#group-action"
      data-sp-placement="right-start"
    >
      <a href="#" class="dropdown-item">New project</a>
      <a href="#" class="dropdown-item">Import project</a>
    </div>
    <div class="sidebar-group-content">
      <nav class="sidebar-menu">
        <div class="sidebar-menu-item">
          <a href="#" class="sidebar-menu-button">
            <span>Design Engineering</span>
          </a>
        </div>
        <div class="sidebar-menu-item">
          <a href="#" class="sidebar-menu-button">
            <span>Sales &amp; Marketing</span>
          </a>
        </div>
      </nav>
    </div>
  </div>
  <div class="sidebar-group">
    <span class="sidebar-group-label">Settings</span>
    <div class="sidebar-group-content">
      <nav class="sidebar-menu">
        <div class="sidebar-menu-item">
          <a href="#" class="sidebar-menu-button"><span>General</span></a>
        </div>
        <div class="sidebar-menu-item">
          <a href="#" class="sidebar-menu-button"><span>Members</span></a>
        </div>
      </nav>
    </div>
  </div>
</aside>

Actions and badges

Add a sidebar-menu-action for a secondary button on a menu item, or a sidebar-menu-badge for a count. Both sit on the right of the button.

<aside class="sidebar-static">
  <div class="sidebar-group">
    <nav class="sidebar-menu">
      <div class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">
          <svg 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"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
          <span>Documents</span>
        </a>
        <button id="docs-action" class="sidebar-menu-action" aria-label="More">
          <svg 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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
        </button>
        <div
          id="docs-action-menu"
          class="dropdown w-44"
          data-sp-toggle="#docs-action"
          data-sp-placement="right-start"
        >
          <a href="#" class="dropdown-item">
            <svg 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" class="text-muted-foreground"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
            <span>Open</span>
          </a>
          <a href="#" class="dropdown-item">
            <svg 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" class="text-muted-foreground"><path d="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/></svg>
            <span>Rename</span>
          </a>
          <div class="dropdown-separator"></div>
          <a href="#" class="dropdown-item">
            <svg 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" class="text-muted-foreground"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
            <span>Delete</span>
          </a>
        </div>
      </div>
      <div class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">
          <svg 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"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
          <span>Notifications</span>
        </a>
        <span class="sidebar-menu-badge">8</span>
      </div>
    </nav>
  </div>
</aside>

Header

The sidebar-header is a pinned region at the top of the panel, typically a brand row built with a large menu button and a logo. Pair it with a dropdown to switch between versions, teams, or workspaces.

<aside class="sidebar-static">
  <header class="sidebar-header">
    <button
      id="header-version"
      class="sidebar-menu-button sidebar-menu-button-lg"
      aria-expanded="false"
    >
      <span
        class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-primary text-lg leading-none text-primary-foreground"
      >
        <i class="font-serif font-bold not-italic">A</i>
      </span>
      <span class="grid flex-1 text-left leading-tight">
        <span class="truncate font-medium">Acme Inc</span>
        <span class="truncate text-xs">v1.0.1</span>
      </span>
      <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
    </button>
    <div
      class="dropdown min-w-56"
      data-sp-toggle="#header-version"
      data-sp-placement="bottom-start"
    >
      <a href="#" class="dropdown-item">
        v1.0.1
        <svg 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" class="ml-auto"><path d="M20 6 9 17l-5-5"/></svg>
      </a>
      <a href="#" class="dropdown-item">v1.1.0-alpha</a>
      <a href="#" class="dropdown-item">v2.0.0-beta1</a>
    </div>
  </header>
</aside>

Search

Add sidebar-input to an input for a search field that fits the sidebar, typically in the header.

<aside class="sidebar-static">
  <header class="sidebar-header">
    <input class="input sidebar-input" type="search" placeholder="Search..." />
  </header>
  <div class="sidebar-content">
    <div class="sidebar-group">
      <nav class="sidebar-menu">
        <div class="sidebar-menu-item">
          <a href="#" class="sidebar-menu-button active">
            <svg 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"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
            <span>Home</span>
          </a>
        </div>
        <div class="sidebar-menu-item">
          <a href="#" class="sidebar-menu-button">
            <svg 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"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
            <span>Inbox</span>
          </a>
        </div>
        <div class="sidebar-menu-item">
          <a href="#" class="sidebar-menu-button">
            <svg 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"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
            <span>Settings</span>
          </a>
        </div>
      </nav>
    </div>
  </div>
</aside>

Footer

The sidebar-footer is a pinned region at the bottom of the panel, often a user row with an avatar. Pair it with a dropdown for an account menu.

<aside class="sidebar-static">
  <footer class="sidebar-footer">
    <button
      id="footer-user"
      class="sidebar-menu-button sidebar-menu-button-lg"
      aria-expanded="false"
    >
      <span class="avatar size-8 rounded-lg">
        <img
          class="avatar-image"
          src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100"
          alt="Leila Navarro"
        />
        <span class="avatar-fallback">LN</span>
      </span>
      <span class="grid flex-1 text-left leading-tight">
        <span class="truncate font-medium">Leila Navarro</span>
        <span class="truncate text-xs">[email protected]</span>
      </span>
      <svg 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" class="ml-auto"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
    </button>
    <div
      class="dropdown min-w-56"
      data-sp-toggle="#footer-user"
      data-sp-placement="top-start"
    >
      <a href="#" class="dropdown-item">Account</a>
      <a href="#" class="dropdown-item">Billing</a>
      <div class="dropdown-separator"></div>
      <a href="#" class="dropdown-item">Log out</a>
    </div>
  </footer>
</aside>

CSS variables

The sidebar reads its dimensions from component-local variables declared on sidebar-container and sidebar-static. Override them per instance with an arbitrary property, or for the whole app with a plain CSS rule.

Variable	Default	Description
`--sidebar-width`	`16rem`	Width of the expanded sidebar
`--sidebar-width-mobile`	`18rem`	Width of the mobile drawer
`--sidebar-width-icon`	`3rem`	Width of the collapsed icon rail

<div class="sidebar-container [--sidebar-width:18rem]"></div>

Options

Sidebar

Set each option with its own data-sp-* attribute on the sidebar element.

Attribute	Values	Default
`data-sp-toggle`	CSS selector	—
`data-sp-collapse`	`offcanvas` \| `icon`	`offcanvas`

<aside
  class="sidebar"
  data-sp-toggle="#my-trigger"
  data-sp-collapse="icon"
></aside>

JavaScript

Events

All events fire on the panel; before* events are cancelable. The mobile drawer fires the show/hide lifecycle, the desktop column fires the collapse/expand lifecycle.

Event	When
`sp-beforeshow`	Before the drawer opens (cancelable)
`sp-show`	Drawer opening
`sp-shown`	Drawer open and settled
`sp-beforehide`	Before the drawer closes (cancelable)
`sp-hide`	Drawer closing
`sp-hidden`	Drawer closed
`sp-beforecollapse`	Before the column collapses (cancelable)
`sp-collapse`	Column collapsing
`sp-collapsed`	Column collapsed and settled
`sp-beforeexpand`	Before the column expands (cancelable)
`sp-expand`	Column expanding
`sp-expanded`	Column expanded and settled

// Persist the desktop state, e.g. into a cookie the server can render from.
panel.addEventListener("sp-collapse", () => saveState("collapsed"));
panel.addEventListener("sp-expand", () => saveState("expanded"));

Methods

Get the instance with sp.sidebar(el), then call its methods:

Method	Description
`show()`	Open the mobile drawer
`hide()`	Close the mobile drawer
`expand()`	Expand the desktop column
`collapse()`	Collapse the desktop column
`toggle()`	Toggle the drawer on mobile, the column on desktop

const sidebar = sp.sidebar(document.querySelector(".sidebar"));
 
sidebar.toggle();

Sidebar

Usage

Examples

Icon collapse

Offcanvas collapse

Initially collapsed

Right sidebar

Two sidebars

Double sidebar

Inset

Inside a dialog

Menu

Submenu

Menu button

Group

Actions and badges

Header

Search

Footer

CSS variables

Options

Sidebar

JavaScript

Events

Methods