Home
Layouts
Two Sidebar

Two Sidebar

A layout with a sidebar on each side, which can be toggled to slide out of view by adding the data-hidden attribute. You can use custom properties to adjust the width’s of the left and right sidebars.

Custom Property	Default Value	Description
`--left-size`	320px	The width of the left sidebar
`--right-size`	320px	The width of the right sidebar

Example
A two sidebar layout.

HTML

<div class="pv-layout-two-sidebar" style="--left-size: 80px; --right-size: 80px">
  <div data-layout="left-sidebar">
    <p>Left</p>
  </div>
  <div data-layout="main-section">
    <p>Main</p>
  </div>
  <div data-layout="right-sidebar">
    <p>Right</p>
  </div>
</div>