Sidebar
Responsive sidebar layout.
Properties
| Property | Attribute | Description | Type name | Type | Default |
|---|---|---|---|---|---|
side | side | Treat as left sidebar unless exactly `"left"` (any other value → right). | string | string | "left" |
sideWidth | side-width | When set, sidebar uses this `flex-basis` when adjacent; otherwise width follows content. | string | string | "" |
contentMin | content-min | Minimum width of the main (default) slot in horizontal layout. | string | string | "50%" |
spacing | spacing | Gap between sidebar and content. | DuoSpacing | (typeof duoSpacingValues)[number] | "m" |
stretch | stretch | Stretch sidebar and main to equal row height (default `true`) | boolean | boolean | true |
Slots
| Name | Description |
|---|---|
sidebar | Narrow column (media, actions, labels, etc.) |
default | Main content region |
Usage
The Sidebar suits all content types. It commonly places media beside descriptions but also aligns buttons with form inputs, where the button acts as a sidebar with content-based width.