Article Layout

Content page with sidebar navigation using layout-sidebar. Sidebar collapses below content on narrow screens.

Overview

This pattern creates a documentation or article page with a sidebar for in-page navigation. It uses data-layout="sidebar" for the responsive split and <layout-text> to constrain the reading width.

Key features:

Responsive sidebar that stacks on mobile
Tree navigation for section links
Comfortable reading measure with layout-text
Article metadata (date, read time)
Section-based content structure

Live Example

An article page with sidebar navigation linking to content sections.

Source Code

The data-layout="sidebar" attribute handles the responsive behavior automatically.

<main data-layout="sidebar" data-layout-gap="xl" data-layout-sidebar-width="narrow" data-layout-content-min="60">
  
  <nav class="tree" aria-label="Page navigation" data-layout-density="compact">
    <ul>
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#installation">Installation</a></li>
      <li><a href="#usage">Usage</a></li>
      <li><a href="#api">API Reference</a></li>
    </ul>
  </nav>

<article>
    <header>
      <h1>Article Title</h1>
      <p class="subtitle">A brief description of the article content.</p>
      <p class="meta">
        <time datetime="2026-01-15">January 15, 2026</time>
        <span>5 min read</span>
      </p>
    </header>

<layout-text data-measure="normal">
      <section id="introduction">
        <h2>Introduction</h2>
        <p>Lead paragraph introducing the topic.</p>
      </section>

<section id="installation">
        <h2>Installation</h2>
        <p>Installation instructions go here.</p>
        <pre><code>npm install package-name</code></pre>
      </section>

<section id="usage">
        <h2>Usage</h2>
        <p>Usage examples and explanations.</p>
      </section>

<section id="api">
        <h2>API Reference</h2>
        <p>Detailed API documentation.</p>
      </section>
    </layout-text>
  </article>
</main>

Layout Configuration

The data-layout="sidebar" pattern accepts these data attributes:

Attribute	Values	Description
`data-layout-gap`	`xs` `s` `m` `l` `xl` `2xl`	Gap between sidebar and content.
`data-layout-sidebar-width`	`narrow` `normal` `wide`	Intrinsic width of the sidebar.
`data-layout-content-min`	`40` `50` `60`	Minimum content width (%) before sidebar stacks.
`data-layout-side`	`end`	Place sidebar after content (default: before content).

Usage Notes

Responsive: Sidebar stacks below content when viewport is too narrow (controlled by data-layout-content-min)
Navigation: Use nav.tree for the sidebar navigation with in-page anchor links
Reading width: Wrap article content in <layout-text> to constrain line length
Sections: Use id attributes on sections that match navigation href values
Active state: Add aria-current="page" to the currently visible section link

Article Layout

Overview

Live Example

Source Code

Layout Configuration

Usage Notes

Related

Layout Sidebar

Tree Navigation

Layout Text