Sidebar JS

• Use data-sidebar-layout on a container (typically <body>) with <aside data-sidebar> for the sidebar and <main> for content. The sidebar stays sticky while the main content scrolls.
• On mobile, the sidebar becomes a slide-out overlay toggled by a [data-sidebar-toggle] button. To show the toggle and make it collapse the sidebar at all widths, set data-sidebar-layout="always".
• Set the --sidebar-width variable to adjust its width globally.

<div data-sidebar-layout>
  <aside data-sidebar>
    <nav>
      <ul>
        <li><a href="#sidebar" aria-current="page">Home</a></li>
        <li><a href="#sidebar">Users</a></li>
        <li>
          <details open>
            <summary>Settings</summary>
            <ul>
              <li><a href="#sidebar">General</a></li>
              <li><a href="#sidebar">Security</a></li>
              <li><a href="#sidebar">Billing</a></li>
            </ul>
          </details>
        </li>
      </ul>
    </nav>
    <footer>
      <button class="outline small" style="width: 100%;">Logout</button>
    </footer>
  </aside>
  <main>
    <div style="padding: var(--space-3)">Main content area. Scrolls with the page body.</div>
  </main>
</div>

Always-collapsible

Set data-sidebar-layout="always" to keep the toggle visible and make it collapse the sidebar on all screen sizes.

<body data-sidebar-layout="always">
  ...
</body>

With top sticky nav

Add data-topnav to a <nav> or <header> element for a full-width sticky top bar. The sidebar will adjust to sit below it. Inspect the HTML source of this website for a live example.

<body data-sidebar-layout>
  <header data-topnav>
    <button data-sidebar-toggle aria-label="Toggle menu" class="outline">☰</button>
    <span>App Name</span>
  </header>

  <aside data-sidebar>
    <header>Logo</header>
    <nav>...navigation...</nav>
    <footer>Actions</footer>
  </aside>

  <main>
    Main page content.
  </main>
</body>

Structure