---
menu: base.offcanvas
title: Offcanvas
page-header: Offcanvas
---

{% assign directions = 'start,end,top,bottom' | split: ',' %}

<div class="card">
	<div class="card-body">
		{% for direction in directions %}
		<a class="btn" data-bs-toggle="offcanvas" href="#offcanvas{{ direction | capitalize }}" role="button" aria-controls="offcanvas{{ direction | capitalize }}">
			Toggle {{ direction }} offcanvas
		</a>
		{% endfor %}
	</div>
</div>

{% for direction in directions %}
<div class="offcanvas offcanvas-