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.
article-layout.html
<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.treefor the sidebar navigation with in-page anchor links - Reading width: Wrap article content in
<layout-text>to constrain line length - Sections: Use
idattributes on sections that match navigationhrefvalues - 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