layout-sidebar

Sidebar layout with a fixed-width sidebar and flexible main content area. Automatically stacks on narrow viewports.

Attributes

Attribute Values Default Description
data-layout-side start, end start Which side the sidebar appears on
data-layout-gap xs, s, m, l, xl m Gap between sidebar and main content
data-layout-sidebar-width narrow, normal, wide normal Width of the sidebar (12rem, 15rem, 20rem)
data-layout-content-min 40, 50, 60 50 Minimum width percentage for main content before wrapping
data-layout-nowrap boolean - Prevents stacking on narrow viewports

Side Variants

The data-layout-side attribute controls which side the sidebar appears on.

Sidebar on Start (default)

Sidebar Main Content

This area grows to fill available space while the sidebar maintains its width. The layout automatically stacks on narrow screens.

Sidebar on End

Main Content

The main content area appears first in the markup but is positioned based on flex direction.

 Sidebar

Related links, filters, or supplementary information.

Code

<!-- Sidebar on start --> <layout-sidebar data-layout-gap="m"> <aside>Sidebar content</aside> <main>Main content</main> </layout-sidebar> <!-- Sidebar on end --> <layout-sidebar data-layout-gap="m" data-layout-side="end"> <main>Main content</main> <aside>Sidebar content</aside> </layout-sidebar>

Width Variants

The data-layout-sidebar-width attribute controls the sidebar width.

data-layout-sidebar-width="narrow" (12rem)

Narrow sidebar

Main content area with more space.

data-layout-sidebar-width="wide" (20rem)

Wide sidebar with more room for navigation or filters.

Main content area.

Code

<!-- Narrow sidebar (12rem) --> <layout-sidebar data-layout-sidebar-width="narrow"> <aside>Sidebar content</aside> <main>Main content</main> </layout-sidebar> <!-- Normal sidebar (15rem) - default --> <layout-sidebar data-layout-sidebar-width="normal"> <aside>Sidebar content</aside> <main>Main content</main> </layout-sidebar> <!-- Wide sidebar (20rem) --> <layout-sidebar data-layout-sidebar-width="wide"> <aside>Sidebar content</aside> <main>Main content</main> </layout-sidebar>

Gap Variants

The data-layout-gap attribute controls spacing between sidebar and main content.

data-layout-gap="xs"

Sidebar

Main content with extra-small gap.

data-layout-gap="l"

Sidebar

Main content with large gap.

Code

<layout-sidebar data-layout-gap="xs">...</layout-sidebar> <layout-sidebar data-layout-gap="s">...</layout-sidebar> <layout-sidebar data-layout-gap="m">...</layout-sidebar> <layout-sidebar data-layout-gap="l">...</layout-sidebar> <layout-sidebar data-layout-gap="xl">...</layout-sidebar>

Usage Examples

Dashboard Layout

Dashboard

Overview

1,234 Users 567 Orders $12.3k Revenue
<layout-sidebar data-layout-gap="l" data-layout-sidebar-width="normal"> <aside> <nav> <ul> <li><a href="#">Overview</a></li> <li><a href="#">Analytics</a></li> <li><a href="#">Reports</a></li> <li><a href="#">Settings</a></li> </ul> </nav> </aside> <main> <h2>Dashboard Content</h2> <layout-grid data-layout-min="12rem" data-layout-gap="m"> <layout-card>Stat 1</layout-card> <layout-card>Stat 2</layout-card> <layout-card>Stat 3</layout-card> </layout-grid> </main> </layout-sidebar>

Article with Related Content

Article Title

Main article content goes here. The sidebar provides space for related links, author info, or supplementary content that enhances the reading experience.

The flexible layout ensures the main content always gets priority width while the sidebar maintains its fixed width.

 Related Articles Getting Started Guide Advanced Techniques Best Practices
<layout-sidebar data-layout-gap="l" data-layout-side="end"> <article> <h2>Article Title</h2> <p>Main article content...</p> </article> <aside> <h3>Related Articles</h3> <ul> <li><a href="#">Article 1</a></li> <li><a href="#">Article 2</a></li> </ul> </aside> </layout-sidebar>

Filters Layout

Filters

Product 1

Product 2

Product 3

Product 4
<layout-sidebar data-layout-gap="m" data-layout-sidebar-width="narrow"> <aside> <h3>Filters</h3> <select> <option>Category</option> </select> <select> <option>Price Range</option> </select> <button type="button">Apply Filters</button> </aside> <main> <layout-grid data-layout-min="10rem" data-layout-gap="m"> <layout-card>Product 1</layout-card> <layout-card>Product 2</layout-card> <layout-card>Product 3</layout-card> </layout-grid> </main> </layout-sidebar>

CSS Implementation

layout-sidebar { display: flex; flex-wrap: wrap; gap: var(--_gap, var(--size-m)); } /* Sidebar (first child by default) */ layout-sidebar > :first-child { flex-basis: var(--_sidebar-width, 15rem); flex-grow: 1; } /* Main content (last child by default) */ layout-sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--_content-min, 50%); } /* Gap variants */ layout-sidebar[data-layout-gap="xs"] { --_gap: var(--size-xs); } layout-sidebar[data-layout-gap="s"] { --_gap: var(--size-s); } layout-sidebar[data-layout-gap="m"] { --_gap: var(--size-m); } layout-sidebar[data-layout-gap="l"] { --_gap: var(--size-l); } layout-sidebar[data-layout-gap="xl"] { --_gap: var(--size-xl); } /* Sidebar on the end (right in LTR) */ layout-sidebar[data-layout-side="end"] { flex-direction: row-reverse; } /* Sidebar width variants */ layout-sidebar[data-layout-sidebar-width="narrow"] { --_sidebar-width: 12rem; } layout-sidebar[data-layout-sidebar-width="normal"] { --_sidebar-width: 15rem; } layout-sidebar[data-layout-sidebar-width="wide"] { --_sidebar-width: 20rem; } /* Content minimum width variants */ layout-sidebar[data-layout-content-min="40"] { --_content-min: 40%; } layout-sidebar[data-layout-content-min="50"] { --_content-min: 50%; } layout-sidebar[data-layout-content-min="60"] { --_content-min: 60%; } /* No wrap - sidebar always visible */ layout-sidebar[data-layout-nowrap] { flex-wrap: nowrap; }

Related Elements