DocPage [pattern] v1.0.0

A standardized layout for documentation pages that supports navigability at scale: fixed left sidebar navigation, scrollable content column with max-width 680–720px, and a right-column table of contents that tracks scroll position.

Label

Documentation Page Layout

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Problem

Documentation without structure becomes unsearchable as it grows. Users cannot scan for their section, lose their place when scrolling, and cannot link to a specific heading.

Solution

Three-column layout: left nav (200–240px, fixed or sticky), main content (max-width 680px, 16px body), right TOC (160–200px, sticky, links to h2/h3 headings with active state tracking).

Structure

    <div class="doc-layout">
      <nav class="doc-sidebar" aria-label="Documentation navigation">
        <!-- collapsible section groups with aria-current="page" on active link -->
      </nav>

      <main class="doc-content" id="main-content">
        <h1>Page Title</h1>
        <!-- content blocks -->
      </main>

      <nav class="doc-toc" aria-label="On this page">
        <p class="toc-label">On this page</p>
        <ul>
          <li><a href="#section-1">Section 1</a></li>
          <!-- generated from h2/h3 headings in main content -->
        </ul>
      </nav>
    </div>
  

Behavior

• Left sidebar: sections collapse/expand; active page link has aria-current='page' and visual highlight.
• Main content: max-width 680–720px for optimal 60–75 character line length.
• Right TOC: sticky; active heading link updates as user scrolls using IntersectionObserver.
• Mobile: sidebar becomes a slide-in drawer triggered by a hamburger; TOC collapses into an 'On this page' disclosure above the content.
• Code blocks: always include a copy button and language label.

A11y

• Two distinct nav landmarks (sidebar and TOC) with unique aria-label values.
• Skip link to #main-content for keyboard-only users.
• Active TOC link communicates position: aria-current='true' on the current section anchor.

DocPage [pattern] v1.0.0

A standardized layout for documentation pages that supports navigability at scale: fixed left sidebar navigation, scrollable content column with max-width 680–720px, and a right-column table of contents that tracks scroll position.

Label

Documentation Page Layout

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Problem

Documentation without structure becomes unsearchable as it grows. Users cannot scan for their section, lose their place when scrolling, and cannot link to a specific heading.

Solution

Three-column layout: left nav (200–240px, fixed or sticky), main content (max-width 680px, 16px body), right TOC (160–200px, sticky, links to h2/h3 headings with active state tracking).

Structure

    <div class="doc-layout">
      <nav class="doc-sidebar" aria-label="Documentation navigation">
        <!-- collapsible section groups with aria-current="page" on active link -->
      </nav>

      <main class="doc-content" id="main-content">
        <h1>Page Title</h1>
        <!-- content blocks -->
      </main>

      <nav class="doc-toc" aria-label="On this page">
        <p class="toc-label">On this page</p>
        <ul>
          <li><a href="#section-1">Section 1</a></li>
          <!-- generated from h2/h3 headings in main content -->
        </ul>
      </nav>
    </div>
  

Behavior

• Left sidebar: sections collapse/expand; active page link has aria-current='page' and visual highlight.
• Main content: max-width 680–720px for optimal 60–75 character line length.
• Right TOC: sticky; active heading link updates as user scrolls using IntersectionObserver.
• Mobile: sidebar becomes a slide-in drawer triggered by a hamburger; TOC collapses into an 'On this page' disclosure above the content.
• Code blocks: always include a copy button and language label.

A11y

• Two distinct nav landmarks (sidebar and TOC) with unique aria-label values.
• Skip link to #main-content for keyboard-only users.
• Active TOC link communicates position: aria-current='true' on the current section anchor.

Relations

related: [@community/pattern-doc-toc, @community/rule-heading-hierarchy, @community/rule-aria-current-page, @community/rule-aria-label-in-name, @community/check-skip-link, @community/rule-keyboard-tab-order, @community/check-heading-hierarchy, @community/check-line-length-optimal, @community/check-focus-visible]

Label

Documentation Page Layout

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Problem

Documentation without structure becomes unsearchable as it grows. Users cannot scan for their section, lose their place when scrolling, and cannot link to a specific heading.

Solution

Three-column layout: left nav (200–240px, fixed or sticky), main content (max-width 680px, 16px body), right TOC (160–200px, sticky, links to h2/h3 headings with active state tracking).

Structure

    <div class="doc-layout">
      <nav class="doc-sidebar" aria-label="Documentation navigation">
        <!-- collapsible section groups with aria-current="page" on active link -->
      </nav>

      <main class="doc-content" id="main-content">
        <h1>Page Title</h1>
        <!-- content blocks -->
      </main>

      <nav class="doc-toc" aria-label="On this page">
        <p class="toc-label">On this page</p>
        <ul>
          <li><a href="#section-1">Section 1</a></li>
          <!-- generated from h2/h3 headings in main content -->
        </ul>
      </nav>
    </div>
  

Behavior

• Left sidebar: sections collapse/expand; active page link has aria-current='page' and visual highlight.
• Main content: max-width 680–720px for optimal 60–75 character line length.
• Right TOC: sticky; active heading link updates as user scrolls using IntersectionObserver.
• Mobile: sidebar becomes a slide-in drawer triggered by a hamburger; TOC collapses into an 'On this page' disclosure above the content.
• Code blocks: always include a copy button and language label.

A11y

• Two distinct nav landmarks (sidebar and TOC) with unique aria-label values.
• Skip link to #main-content for keyboard-only users.
• Active TOC link communicates position: aria-current='true' on the current section anchor.