Sidebar

Sidebar Layout

Use the sidebar layout to further divide the main content area of the primary layout. It includes a controls area fixed to the bottom of the main content area that can include buttons for navigating content in the area above.

Padding and margins are not hard-coded into the layout to allow for more flexibility using spacing utilities.

The direct children of the layout container use the data attribute data-grid-area to denote the top-level parts of the layout so that you can apply them to any HTML element.

You can set the width of the sidebar using a custom property.

Example
A sidebar layout with minimal content.

<div class="pv-layout-sidebar">
  <div data-grid-area="main">
    <div>Main</div>
    <div>Controls</div>
  </div>
  <div data-grid-area="sidebar">
    Sidebar
  </div>
</div>