Layout

Sidebar

The .sidebar layout arranges exactly two children in columns: a target-width sidebar and flexible main content. If the main content shrinks to its minimum width, the children stack vertically. Use this layout for page navigation and content, media objects, and form rows.

Usage

• Add .sidebar to the parent.
• Place exactly two children. The first is the sidebar; the second is the main content.
• Optional custom properties:
  • --sidebar-target-width: Sets the preferred sidebar width. The default is 15rem.
  • --sidebar-content-min-width: Sets the minimum main-content width. Increase the value to stack earlier or decrease it to stack later. The default is 50%.
  • --gap: Sets the space between the children. The default is --space-s-m.

Create a page with a side menu

Place an <aside> containing a <nav> and a <main> as the layout's two children. For a full-page shell, add .container to the sidebar parent.

Create a media object

The .media modifier sizes the first child to its content, which supports an avatar, icon, or thumbnail beside text. It also vertically centers the two children. .media sidebars have a smaller --gap value by default.

Prevent equal-height children

Use .no-stretch to prevent the children from stretching to the same height.

Place the sidebar on the right

Use .reversed to place the sidebar on the right for a table of contents or supplementary metadata.