Sidebar

Places a fixed-width sidebar beside flexible content, and stacks them when the content would drop below half the width.

Example

View Code 
<div class="sidebar" data-width="xs" data-gap="lg">
    <nav aria-label="Section">
        <a href="#">Overview</a>
    </nav>
    <article>
        <h2>Content</h2>
        <p>Takes the remaining width, and the whole width once the two no longer fit.</p>
    </article>
</div>

When to use it

A sidebar pairs something with a natural width, such as a navigation list, a figure, or a form's summary, with content that should take whatever is left. It handles the awkward middle widths on its own: the two sit side by side as long as the content keeps at least half the space, and stack when it cannot.

How it works

Both children live in a wrapping flex row. The sidebar child gets data-width as its basis; the content child grows aggressively from a zero basis and refuses to shrink below half the container. When the container is too narrow for sidebar plus half, the content wraps to its own line and both fill the width. There is no breakpoint; the switch happens wherever the numbers say it should.

<div class="sidebar" data-side="end">
    <article>Main content first in the source.</article>
    <aside>Shown after it.</aside>
</div>

Why this name

The word says exactly what the fixed child is. Foundation 6 built this with .grid-x columns and medium-8/medium-4 classes, which fixed the switch to a viewport breakpoint rather than to the content.

Attributes

Attribute Type Values Default Description
data-side enum start, end start Which child is the sidebar: the first (start) or the last (end).
data-width enum 2xs, xs, sm, md, lg, xl, 2xl sm The sidebar's preferred width.
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl md Space between the two children, side by side or stacked.
data-align enum start, center, end, stretch, baseline stretch Vertical alignment of the two children when side by side.

Children

  • > *: exactly 2. Exactly two: the sidebar and the content, in either order according to data-side.

Tokens

Token Description
--yeti-width-sm The default sidebar width.
--yeti-space-md The default gap.
Internal tokens (may change between minor versions) - `--_yeti-gap` - `--_yeti-width` - `--_yeti-align`

Accessibility

  • Purely visual. Put the content first in the source when it matters more, and use data-side="end" to show the sidebar after it.

Browser support

  • Used without guards: flexbox gap
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.