Star

The Sidebar

<sidebar-l layout="side:right side-width:300px content-min:40% shrink gap:2">...</sidebar-l>

The sidebar is a flex container arranged in a row, containing two elements:

  • one with a fixed width : the side.
  • and the other taking the remaining space : the content.

It can switch to a column layout when the content width drops below a specific value.

When to use ?

You need two elements in a row :

  • one width a fixed width
  • the other with the remaining width

You can make the content wrap into a column when its width is less than a specific value.

Attributes

  • side : define the position of the side, left or right.
  • side-width : define the side width.
  • content-min : when the content width drops bellow this value, the sidebar wrap in column.
  • gap : the space between the side and the content.
  • gap-x : the horizontal space between the side and the content (before it wrap in column).
  • gap-y : the vertical space between the side and the content (after it wrap in column).
  • reverse : when enabled, reverse the elements order when wrap in column.
  • shrink : when enabled, the side and content will adopt their natural heights. By default, their heights match the height of the sidebar.

side-width

The “side” refers to the fixed-width portion of the sidebar, while the other part is considered the “content” (Just to be clear 😉).

You can set the width of the side using the side-width attribute.

side

By default, the side is the first element within the sidebar and appears on the left.

However, you can place it as the last element, in which case the content will come first and occupy the full width, while the side will appear on the right.

content-min

The content-min attribute allows you to specify when the sidebar should wrap.

For example, setting content-min to 300px means the sidebar will wrap when the content element’s width becomes less than 300px.

By default, the content-min value is set to 50%, meaning the content will wrap into a column layout when its width becomes less than 50% of the container.

shrink

By default, all elements in the sidebar match the height of the sidebar.

To make the elements inside the sidebar adjust to the height of their content instead, simply add the shrink attribute.

reverse

The reverse attribute reverses the order of elements when the sidebar wraps into a column layout, so the first element becomes the last and vice versa.

gap

You can use the gap attribute to adjust the spacing between the side and the content.

In the previous example, the gap was the same in both row (before wrapping) and column (after wrapping) layouts.

To apply different gaps for these two scenarios, you can use gap-x for the row layout and gap-y for the column layout.