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"> <!-- Sidebar navigation --> <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> <!-- Main article content --> <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

Related

Layout Sidebar

Sidebar layout element documentation

Tree Navigation

Collapsible tree navigation pattern

Layout Text

Reading measure constraint element