Sidebar

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.

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

With top sticky nav

Add data-topnav to a header element for a full-width top navigation bar. The sidebar will adjust to sit below it.

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

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

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

Structure

AttributeElement
data-sidebar-layoutContainerGrid layout wrapper (sidebar + main), typically <body>
data-topnav<header>Full-width top nav (optional, spans full width)
data-sidebar<aside>Sticky sidebar element
data-sidebar-toggle<button>Toggles sidebar visibility on mobile
data-sidebar-openLayoutApplied to layout when sidebar is open