Sidebar
The Sidebar layout creates a responsive 2-column layout with one fixed-width column and one flexible column. This component automatically switches from horizontal to vertical layout based on content constraints, making it perfect for main content areas with sidebars that need to gracefully collapse on smaller screens or when space becomes limited.
Example
<div class="sidebar --right" style="--layout-gap: 1rem; --layout-threshold: 20rem">
<main>Main content area that flexes</main>
<aside>Fixed-width sidebar content</aside>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-gap |
0 |
Gap between child elements |
--layout-threshold |
0 |
Fixed width of the sidebar column |
--layout-inline-size |
60% |
Minimum size of the flexible column before wrapping |
--layout-items |
stretch |
Align items on cross axis |
--layout-justify |
start |
Justify content on main axis |
Class Utilities
| Class | Description |
|---|---|
.--start, .--end, .--center, .--stretch |
Controls cross-axis alignment of items |
.--justify-* |
Controls main-axis distribution of items (start, end, center, between, around) |
.--left |
Makes the first child the flexible column, second child the sidebar |
.--right |
Makes the second child the flexible column, first child the sidebar |