Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
Build hidden sidebars into your project for navigation, shopping carts, widgets etc.
<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" id="offcanvas" tabindex="-1">
<!-- Header -->
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title">Menu</h5>
<button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
</div>
<!-- Body -->
<div class="offcanvas-body">
<ul class="nav flex-column mt-n2">
<li class="nav-item">
<a href="#" class="nav-link px-0 py-2 active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 py-2 active">User Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 py-2 active">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 py-2 active">Our Works</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 py-2 active">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 py-2 active">Our Team</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 py-2 active">Dashboard</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 py-2 active">Contacts</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-0 py-2 active">Help Center</a>
</li>
</ul>
</div>
<!-- Footer -->
<div class="offcanvas-header d-flex border-top">
<button class="btn btn-outline-primary w-100 me-2" type="button">
<i class="ai-login me-1"></i>
Sign In
</button>
<button class="btn btn-primary w-100" type="button">
<i class="ai-user me-1"></i>
Sign Up
</button>
</div>
</div>// Solid button group
.offcanvas.offcanvas-start.border.rounded-3.my-2(data-offcanvas-show='true' id='offcanvas' tabindex='-1' style='position: static; transform: none; visibility: visible;')
.offcanvas-header.border-bottom
h5.offcanvas-title Menu
button(type='button').btn-close
.offcanvas-body
ul.nav.flex-column.mt-n2
li.nav-item
a(href='#').nav-link.px-0.py-2.active
| Home
li.nav-item.dropdown
a(href='#').nav-link.px-0.py-2
| User Profile
li.nav-item
a(href='#').nav-link.px-0.py-2
| Services
li.nav-item
a(href='#').nav-link.px-0.py-2
| Our Works
li.nav-item
a(href='#').nav-link.px-0.py-2
| About
li.nav-item
a(href='#').nav-link.px-0.py-2
| Our Team
li.nav-item
a(href='#').nav-link.px-0.py-2
| Dashboard
li.nav-item
a(href='#').nav-link.px-0.py-2
| Contacts
li.nav-item
a(href='#').nav-link.px-0.py-2
| Help Center
.offcanvas-header.d-flex.border-top
button(type='button').btn.btn-outline-primary.w-100.me-2
i.ai-login.me-1
| Sign In
button(type='button').btn.btn-primary.w-100
i.ai-user.me-1
| Sign Up
<!-- Offcanvas position: Left -->
<!-- Toogle button -->
<button class="btn btn-outline-secondary" 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">
<p>Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
</div>
</div>
<!-- Offcanvas position: Top -->
<!-- Toogle button -->
<button class="btn btn-outline-secondary" 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>
<div class="offcanvas-body">
<p>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-outline-secondary" 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">
<p>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-outline-secondary" 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">
<p>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-outline-secondary
| 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
p Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
// Offcanvas position: Top
// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasTop").btn.btn-outline-secondary
| Toggle top offcanvas
// Offcanvas
.offcanvas.offcanvas-top(id="offcanvasTop", tabindex="-1")
.offcanvas-header.border-bottom
h5.offcanvas-title Top offcanvas
button(type="button", data-bs-dismiss="offcanvas").btn-close
.offcanvas-body
p 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-outline-secondary
| 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
p 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-outline-secondary
| 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
p Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
<!-- Navbar with offcanvas menu on mobile -->
<header class="header navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
<a href="#" class="navbar-brand pe-xl-2 me-4">
<span class="text-primary flex-shrink-0 me-2">
<svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
</svg>
</span>
Around
</a>
<button type="button" class="navbar-toggler me-2" data-bs-toggle="offcanvas" data-bs-target="#primaryMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" id="primaryMenu">
<div class="offcanvas-header">
<h5 class="mt-1 mb-0">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body pt-0">
<ul class="navbar-nav p-0">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Action link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Action link</a></li>
<li><a href="#" class="dropdown-item">Another action</a></li>
<li><a href="#" class="dropdown-item">Something else here</a></li>
<li><a href="#" class="dropdown-item">Yet another link</a></li>
</ul>
</li>
<li><a href="#" class="dropdown-item">Another action</a></li>
<li class="dropdown-divider"></li>
<li><a href="#" class="dropdown-item">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</header>// Navbar with offcanvas menu on mobile
header.header.navbar.navbar-expand-lg.navbar-light.fixed-top
.container
a(href="#").navbar-brand.pe-xl-2.me-4
span.text-primary.flex-shrink-0.me-2
svg(version="1.1", width="35", height="32", viewBox="0 0 36 33", xmlns="http://www.w3.org/2000/svg")
path(fill="currentColor", d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z")
| Around
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#primaryMenu").navbar-toggler.me-2
span.navbar-toggler-icon
#primaryMenu.offcanvas.offcanvas-end
.offcanvas-header
h5.mt-1.mb-0 Menu
button(type="button", data-bs-dismiss="offcanvas", aria-label="Close").btn-close
.offcanvas-body.pt-0
ul.navbar-nav.p-0
li.nav-item.active
a(href="#").nav-link
| Home
li.nav-item
a(href="#").nav-link
| Link
li.nav-item.dropdown
a(href="#", data-bs-toggle="dropdown", data-bs-auto-close="outside").nav-link.dropdown-toggle
| Dropdown
ul.dropdown-menu
li: a(href="#").dropdown-item
| Action link
li.dropdown
a(href="#", data-bs-toggle="dropdown").dropdown-item.dropdown-toggle
| Dropdown
ul.dropdown-menu
li: a(href="#").dropdown-item
| Action link
li: a(href="#").dropdown-item
| Another action
li: a(href="#").dropdown-item
| Something else here
li: a(href="#").dropdown-item
| Yet another link
li: a(href="#").dropdown-item
| Another action
li.dropdown-divider
li: a(href="#").dropdown-item
| Something else here
li.nav-item
a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled
| Disabled