---
page-menu: base.offcanvas
title: Offcanvas
page-header: Offcanvas
layout: default
permalink: offcanvas.html
---

{% 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-{{ direction }}" tabindex="-1" id="offcanvas{{ direction | capitalize }}" aria-labelledby="offcanvas{{ direction | capitalize }}Label">
	<div class="offcanvas-header">
		<h2 class="offcanvas-title" id="offcanvas{{ direction | capitalize }}Label">{{ direction | capitalize }} offcanvas</h2>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!
		</div>
		<div class="mt-3">
			<button class="btn btn-primary" type="button" data-bs-dismiss="offcanvas">
				Close offcanvas
			</button>
		</div>
	</div>
</div>
{% endfor %}