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" aria-label="Close"></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><!-- 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" aria-label="Close"></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" aria-label="Close"></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" aria-label="Close"></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" aria-label="Close"></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><!-- Navbar with offcanvas menu on mobile -->
<header class="header navbar navbar-expand-lg fixed-top bg-light">
<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" aria-label="Toggle navigation">
<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>