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-gap`	`none`, `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`	`m`	Gap between the columns, on the shared size scale.
`data-layout-side`	`end`	—	end: put the sidebar on the end side. nav/aside children keep DOM order (order: 1); the positional fallback reverses the row.
`data-layout-sidebar-width`	`narrow`, `normal`, `wide`	`normal`	Sidebar basis: 12 / 16 / 20rem (the same three values in every sidebar context).
`data-layout-content-min`	`s`, `m`, `l`	`m`	Content column floor before wrapping: 40 / 50 / 60%. One-off: style="--layout-content-min: 45%".
`data-layout-nowrap`	(boolean)	—	Never wrap; the sidebar stays beside the content.
`data-layout-sticky` (on nav, aside)	(boolean)	—	Sticky sidebar with its own scroll, active when the page opts into the smart sticky system (:root[data-sticky]).

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

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

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