Skip to content

Sidebar

Preview Available in release assets

Give secondary content a preferred size while the primary content takes the available space.

Show code
<div class="thin-sidebar">
  <nav aria-label="Documentation topics">
    <a href="/foundations/fluid-type/">Fluid type</a>
  </nav>
  <section aria-label="Documentation content">
    <p>Primary content can fill the available inline space.</p>
  </section>
</div>

Anatomy

  • Element with thin-sidebar class
  • First child: secondary content with a preferred size
  • Last child: primary content

Variants and sizes

  • Leading sidebar
  • Wrapped narrow layout

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Narrow container
  • Wide container
  • Long localized content
  • Right-to-left content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

This layout owns no JavaScript behavior. Reading order, focus order, links, and scrolling stay native.

Accessibility

Layout changes position, never meaning. Keep source order logical, because it is the reading and focus order at every size.

Contract
PLATFORM
Basis
Native CSS layout and document defaults over semantic HTML; no APG widget

API

Add class=thin-sidebar to an element with two children. The first keeps a preferred size; the second takes the remaining space and wraps below when it would fall under half the width.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts