Skip to main content

Sidebar

A two-column layout element. The first child becomes the <aside> (sidebar panel); all remaining children become the <main> area. No special child keywords needed.

Basic usage​

sidebar:
  card:
    ## Sidebar
    Navigation or filters here.
  card:
    ## Main content
    The rest of your content goes here.

Controlling aside width​

Add a fraction modifier on the sidebar: itself to set the aside width.

1/4 sidebar:
  card:
    ## Narrow sidebar
  card:
    ## Main area (3/4)

Supported fractions: 1/2, 1/3, 2/3, 1/4, 3/4. Default aside width is 240px.

Multiple main children​

Any elements after the first child go into the main area.

1/3 sidebar:
  card:
    checked checkbox: In stock
    checkbox: On sale
  card:
    ## Products
    full input: Search...
  card:
    ## Recommendations
    Some content here.

Reference​

ModifierDescription
1/4 sidebar:Aside takes 25% of the width
1/3 sidebar:Aside takes 33% of the width
1/2 sidebar:Aside takes 50% of the width