Sidebar
The sidebar layout provides a flexible main content area alongside a 'fixed' width sidebar, which can be positioned on either the left or right.
If there is not enough space in the viewport to fit both the sidebar and the minimum width of the main content, they will stack on top of each other.
Configuration #
| Property | Default value | Description |
|---|---|---|
--gutter | var(--spacing-m) | This defines the space between the sidebar and main content. |
--sidebar-target-width | 20rem | How large the sidebar should be |
--sidebar-content-min-width | 60% | The minimum size of the main content area |
Exceptions #
| Exception | Description |
|---|---|
.sidebar[data-sidebar-reversed] | Flips the sidebar to be on the right. |