3-rail shell

This page is the canonical demo for the .content > nav.leftnav rail next to .content > aside. Three sticky rails on desktop; on viewports below 720px both rails stack above <main> — left nav first, aside second.

Markup

<div class="content">
  <nav class="leftnav">…</nav>
  <main>…</main>
  <aside>…</aside>
</div>

Notes

• Use .rail-section for grouped lists in either rail.
• Section heading: <h3 class="eyebrow">.
• For collapsible sections, wrap in <details> + <summary class="rail-section-summary"> and load rail.js to persist state.

Filler so the main column has room to breathe and the sticky rails stay pinned as you scroll. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.