brand brand
Apps
Pages
Documentation
Quickly Build Applications

Exclusively for webapps Based on Bootstrap

Go Appster

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

Demo

You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="offcanvas" is required.

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. 
														
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
	Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
	Button with data-bs-target
</button>

<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
	<div class="offcanvas-header">
	<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
	<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
	<div>
		Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
	</div>
	<div class="dropdown mt-3">
		<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
		Dropdown button
		</button>
		<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
		</ul>
	</div>
	</div>
</div>
<!--/ Offcanvas Wrapper-->
Placemeny

There's no default placement for offcanvas components, so you must add one of the modifier classes.

Offcanvas top
...
Offcanvas right
...
Offcanvas bottom
... 
														
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasExample">
	Toggle top offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasExample">
	Toggle right offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasExample">
	Toggle bottom offcanvas
</button>

<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
	<div class="offcanvas-header">
		<h5 id="offcanvasTopLabel">Offcanvas top</h5>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
		...
	</div>
</div>
<!--/ Offcanvas Wrapper-->

<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasTopLabel">
	<div class="offcanvas-header">
		<h5 id="offcanvasRightLabel">Offcanvas right</h5>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
		...
	</div>
</div>
<!--/ Offcanvas Wrapper-->

<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasTopLabel">
	<div class="offcanvas-header">
		<h5 id="offcanvasBottomLabel">Offcanvas bottom</h5>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
		...
	</div>
</div>
<!--/ Offcanvas Wrapper-->
Jump to