Sidebar & app shell

Overview

ld-shell wraps an ld-sidebar and the page content (ld-shell-main)

Scroll this page: the active link in the sidebar follows you because the link list carries data-ld-scrollspy. Resize the window below 640px and the sidebar collapses into a bar with a Menu button; picking a link, or pressing Escape, closes the menu again.

Markup

Everything is class-based; the only JS-driven attribute is the toggle button

<div class="ld-shell" data-ld-collapse-at="md">
  <aside class="ld-sidebar">
    <div class="ld-sidebar-header">
      <a class="ld-nav-brand" href="/">Brand</a>
      <button class="ld-btn ld-sidebar-toggle" data-ld-toggle="navbar-collapse"
              data-ld-target="#side-menu" aria-expanded="false">Menu</button>
    </div>
    <nav class="ld-sidebar-body" id="side-menu">
      <ul class="ld-sidebar-links">
        <li><a class="ld-sidebar-link" href="#a" data-ld-active="true">Home</a></li>
      </ul>
    </nav>
  </aside>
  <main class="ld-shell-main"> … </main>
</div>

Responsive

Pick the breakpoint with data-ld-collapse-at on ld-shell

Hover & focus variants

New in v3.0.0 — ld-hover:*, ld-focus:*, ld-focus-visible:*

Room to scroll

So the scrollspy and sticky sidebar have something to do

Anchor jumps leave room for the sticky top bar on small screens (scroll-margin-top).