FinderBuy now

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, etc. Finder customized version of the component is responsive and can be used as alternative to navbar collapse (only lg breakpoint).

Bootstrap docs

Left offcanvas

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Right offcanvas

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Top offcanvas

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Bottom offcanvas

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Offcanvas components

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" id="offcanvas" tabindex="-1">

<!-- Header -->
<div class="offcanvas-header border-bottom">
<h6 class="offcanvas-title">Menu</h6>
<button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
</div>

<!-- Body -->
<simplebar class="offcanvas-body" >
<ul class="nav flex-column">
  <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
  <li class="nav-item dropdown"><a class="nav-link" href="#">User Profile</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Our Works</a></li>
  <li class="nav-item"><a class="nav-link" href="#">About</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Our Team</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Vendor Dashboard</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Contacts</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Help Center</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
</ul>
</simplebar>

<!-- Footer -->
<div class="offcanvas-footer border-top">
<button class="btn btn-outline-primary btn-sm w-100 me-2" type="button">
  <i class="fi-login me-1"></i>
  Sign In
</button>
<button class="btn btn-primary btn-sm w-100" type="button">
  <i class="fi-user me-1"></i>
  Sign Up
</button>
</div>
</div>

Placement

<!-- Offcanvas position: Left -->

<!-- Toogle button -->
<button class="btn btn-accent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft">Toggle left offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" id="offcanvasLeft" tabindex="-1">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title">Left offcanvas</h5>
<button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
</div>
<simplebar class="offcanvas-body" >
<p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
</simplebar>
</div>


<!-- Offcanvas position: Right -->

<!-- Toogle button -->
<button class="btn btn-accent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">Toggle right offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-end" id="offcanvasRight" tabindex="-1">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title">Right offcanvas</h5>
<button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
</div>
<simplebar class="offcanvas-body" >
<p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
</simplebar>
</div>


<!-- Offcanvas position: Top -->

<!-- Toogle button -->
<button class="btn btn-accent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop">Toggle top offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-top" id="offcanvasTop" tabindex="-1">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title">Top offcanvas</h5>
<button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
</div>
<simplebar class="offcanvas-body" >
<p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
</simplebar>
</div>


<!-- Offcanvas position: Bottom -->

<!-- Toogle button -->
<button class="btn btn-accent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom">Toggle bottom offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title">Bottom offcanvas</h5>
<button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
</div>
<simplebar class="offcanvas-body" >
<p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
</simplebar>
</div>
Top