Offcanvas
Basic
{% component "Offcanvas" scroll=False keyboard=False %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs={"class": "btn btn-primary", "type": "button"} %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Offcanvas{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
Offcanvas Placement Start
{% component "Offcanvas" placement="start" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Offcanvas Start{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>This offcanvas appears from the start (left).</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Offcanvas Start
This offcanvas appears from the start (left).
Offcanvas Placement End
{% component "Offcanvas" placement="end" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Offcanvas End{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>This offcanvas appears from the end (right).</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Offcanvas End
This offcanvas appears from the end (right).
Offcanvas Placement Top
{% component "Offcanvas" placement="top" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Offcanvas Top{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>This offcanvas appears from the top.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Offcanvas Top
This offcanvas appears from the top.
Offcanvas Placement Bottom
{% component "Offcanvas" placement="bottom" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Offcanvas Bottom{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>This offcanvas appears from the bottom.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Offcanvas Bottom
This offcanvas appears from the bottom.
Offcanvas Body Scrolling Enabled
{% component "Offcanvas" scroll=True backdrop="false" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Offcanvas with body scrolling{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>Try scrolling the rest of the page to see this option in action.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Offcanvas with body scrolling
Try scrolling the rest of the page to see this option in action.
Offcanvas With Backdrop
{% component "Offcanvas" scroll=True %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Backdrop with scrolling{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>Try scrolling the rest of the page to see this option in action.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Backdrop with scrolling
Try scrolling the rest of the page to see this option in action.
Offcanvas Static Backdrop
{% component "Offcanvas" backdrop="static" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Static Backdrop{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>I will not close if you click outside of me.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Static Backdrop
I will not close if you click outside of me.
Offcanvas No Backdrop
{% component "Offcanvas" backdrop="false" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}No Backdrop{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>This offcanvas has no backdrop.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
No Backdrop
This offcanvas has no backdrop.
Offcanvas Responsive Lg
{% component "Offcanvas" responsive="lg" placement="end" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Responsive offcanvas{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>This is content within an offcanvas-lg.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Responsive offcanvas
This is content within an offcanvas-lg.
Offcanvas Responsive Md
{% component "Offcanvas" responsive="md" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" %}Responsive MD offcanvas{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>This is content within an offcanvas-md.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Responsive MD offcanvas
This is content within an offcanvas-md.
Offcanvas Without Close Button
{% component "Offcanvas" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" close_button=False %}
{% component "OffcanvasTitle" %}No Close Button{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>This offcanvas header has no close button.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
No Close Button
This offcanvas header has no close button.
Offcanvas Custom Title Heading
{% component "Offcanvas" %}
{% fill "toggle" %}
{% component "OffcanvasToggle" attrs:class="btn btn-primary" %}Toggle Offcanvas{% endcomponent %}
{% endfill %}
{% fill "default" %}
{% component "OffcanvasHeader" %}
{% component "OffcanvasTitle" as_="h3" %}Custom Heading{% endcomponent %}
{% endcomponent %}
{% component "OffcanvasBody" %}
<p>This offcanvas title uses h3.</p>
{% endcomponent %}
{% endfill %}
{% endcomponent %}
Preview:
Custom Heading
This offcanvas title uses h3.