Buy now
Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, etc. Around customized version of the component is responsive and can be used as alternative to navbar collapse (only lg breakpoint).
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.
Bottom offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
Offcanvas components
Menu
<!-- 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 -->
<div class="offcanvas-body" data-simplebar>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link px-0 active" href="#">Home</a></li>
<li class="nav-item dropdown"><a class="nav-link px-0" href="#">User Profile</a></li>
<li class="nav-item"><a class="nav-link px-0" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link px-0" href="#">Our Works</a></li>
<li class="nav-item"><a class="nav-link px-0" href="#">About</a></li>
<li class="nav-item"><a class="nav-link px-0" href="#">Our Team</a></li>
<li class="nav-item"><a class="nav-link px-0" href="#">Vendor Dashboard</a></li>
<li class="nav-item"><a class="nav-link px-0" href="#">Contacts</a></li>
<li class="nav-item"><a class="nav-link px-0" href="#">Help Center</a></li>
<li class="nav-item"><a class="nav-link px-0" href="#">Support</a></li>
</ul>
</div>
<!-- Footer -->
<div class="offcanvas-footer border-top">
<button class="btn btn-outline-primary btn-sm w-100 me-2" type="button">
<i class="ai-log-in me-1"></i>
Sign In
</button>
<button class="btn btn-primary btn-sm w-100" type="button">
<i class="ai-user me-1"></i>
Sign Up
</button>
</div>
</div>// Offcanvas
.offcanvas.offcanvas-start(id="offcanvas", tabindex="-1")
// Header
.offcanvas-header.border-bottom
h6.offcanvas-title Menu
button(type="button", data-bs-dismiss="offcanvas").btn-close
// Body
.offcanvas-body(data-simplebar)
ul.nav.flex-column
li.nav-item
a(href="#").nav-link.px-0.active
| Home
li.nav-item.dropdown
a(href="#").nav-link.px-0
| User Profile
li.nav-item
a(href="#").nav-link.px-0
| Services
li.nav-item
a(href="#").nav-link.px-0
| Our Works
li.nav-item
a(href="#").nav-link.px-0
| About
li.nav-item
a(href="#").nav-link.px-0
| Our Team
li.nav-item
a(href="#").nav-link.px-0
| Vendor Dashboard
li.nav-item
a(href="#").nav-link.px-0
| Contacts
li.nav-item
a(href="#").nav-link.px-0
| Help Center
li.nav-item
a(href="#").nav-link.px-0
| Support
// Footer
.offcanvas-footer.border-top
button(type="button").btn.btn-outline-primary.btn-sm.w-100.me-2
i.ai-log-in.me-1
| Sign In
button(type="button").btn.btn-primary.btn-sm.w-100
i.ai-user.me-1
| Sign Up
Placement
<!-- Offcanvas position: Left -->
<!-- Toogle button -->
<button class="btn btn-translucent-primary" 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>
<div class="offcanvas-body" data-simplebar>
<p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
</div>
</div>
<!-- Offcanvas position: Right -->
<!-- Toogle button -->
<button class="btn btn-translucent-primary" 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>
<div class="offcanvas-body" data-simplebar>
<p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
</div>
</div>
<!-- Offcanvas position: Bottom -->
<!-- Toogle button -->
<button class="btn btn-translucent-primary" 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>
<div class="offcanvas-body" data-simplebar>
<p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
</div>
</div>// Offcanvas position: Left
// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasLeft").btn.btn-translucent-primary
| Toggle left offcanvas
// Offcanvas
.offcanvas.offcanvas-start(id="offcanvasLeft", tabindex="-1")
.offcanvas-header.border-bottom
h5.offcanvas-title Left offcanvas
button(type="button", data-bs-dismiss="offcanvas").btn-close
.offcanvas-body(data-simplebar)
p.fs-sm Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
// Offcanvas position: Right
// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasRight").btn.btn-translucent-primary
| Toggle right offcanvas
// Offcanvas
.offcanvas.offcanvas-end(id="offcanvasRight", tabindex="-1")
.offcanvas-header.border-bottom
h5.offcanvas-title Right offcanvas
button(type="button", data-bs-dismiss="offcanvas").btn-close
.offcanvas-body(data-simplebar)
p.fs-sm Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
// Offcanvas position: Bottom
// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasBottom").btn.btn-translucent-primary
| Toggle bottom offcanvas
// Offcanvas
.offcanvas.offcanvas-bottom(id="offcanvasBottom", tabindex="-1")
.offcanvas-header.border-bottom
h5.offcanvas-title Bottom offcanvas
button(type="button", data-bs-dismiss="offcanvas").btn-close
.offcanvas-body(data-simplebar)
p.fs-sm Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.