Pit Viper

v2.22.1

Pit Viper

v2.22.1
v1 / v2

  • Home
  • Layouts
  • Two Sidebar

Two Sidebar

Two Sidebar Layout

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.

Main

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>