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.

Width Variants

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

Gap Variants

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

Usage Examples

Dashboard Layout

Article with Related Content

Filters Layout

Related
↑