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.
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>