Docs Layout

Structure

Three children, in order: a left <aside> for the sidebar nav, an <article> for the main content, and a right <aside data-toc> for the table of contents.

<div data-layout="docs">

  <aside>
    <nav aria-label="Documentation" data-nav="sidebar">
      <small>Section</small>
      <ul>
        <li><a href="page.html" aria-current="page">Current page</a></li>
        <li><a href="other.html">Other page</a></li>
      </ul>
    </nav>
  </aside>

  <article>
    <!-- main content -->
  </article>

  <aside data-toc>
    <nav aria-label="On this page" data-nav="toc">
      <small>On this page</small>
      <ul>
        <li><a href="#section">Section</a></li>
      </ul>
    </nav>
  </aside>

</div>

Columns

The grid template at full width: 220px 1fr 200px. The content column takes all remaining space. Max width of the whole layout: 1400px, centred.

Sticky sidebars

Both <aside> elements are position: sticky with top: calc(60px + space-4) — accounting for the top nav height. They scroll with the page until they reach their sticky top offset, then lock in place.

Both have max-height: calc(100vh - 80px) and overflow-y: auto, so a tall sidebar nav will scroll internally without moving the main content.

Stickiness requires the [data-layout="docs"] wrapper to have align-items: start. Without it, the aside stretches to the full grid row height and sticky has no room to work. This is set by the stylesheet — do not override align-items on the wrapper.

Prev / Next navigation

Add a [data-role="prev-next"] block at the end of the article to link to adjacent pages. The pattern handles both previous-only, next-only, and both.

<div data-role="prev-next">
  <a href="prose.html" rel="prev">
    <small>← Previous</small>
    <span>Prose</span>
  </a>
  <a href="footer.html" rel="next">
    <small>Next →</small>
    <span>Footer</span>
  </a>
</div>

Previous aligns left; next aligns right. Either can be omitted — the remaining link holds its position. The rel attribute is meaningful to search engines and screen readers, not just to the stylesheet.

Responsive behaviour

The sidebars are hidden, not just narrowed — they disappear entirely on small screens. If sidebar navigation is critical on mobile, add a supplemental nav inside the article or use a different layout pattern.

Scroll-spy for TOC

The right sidebar TOC can track the active heading as the user scrolls. Include toc-spy.js before </body>:

<script src="../toc-spy.js"></script>

The script observes h2[id] and h3[id] inside <article> using IntersectionObserver. As each heading enters the viewport, it sets aria-current="true" on the matching TOC link. No dependencies, no configuration.

Reference