Finder Buy 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 -->
  <div class="offcanvas-body" data-simplebar>
    <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>
  </div>

  <!-- 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>
// 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.active
          | Home
      li.nav-item.dropdown
        a(href="#").nav-link
          | User Profile
      li.nav-item
        a(href="#").nav-link
          | Services
      li.nav-item
        a(href="#").nav-link
          | Our Works
      li.nav-item
        a(href="#").nav-link
          | About
      li.nav-item
        a(href="#").nav-link
          | Our Team
      li.nav-item
        a(href="#").nav-link
          | Vendor Dashboard
      li.nav-item
        a(href="#").nav-link
          | Contacts
      li.nav-item
        a(href="#").nav-link
          | Help Center
      li.nav-item
        a(href="#").nav-link
          | Support

  // Footer
  .offcanvas-header.border-top
    button(type="button").btn.btn-outline-primary.btn-sm.w-100.me-2
      i.fi-login.me-1
      | Sign In
    button(type="button").btn.btn-primary.btn-sm.w-100
      i.fi-user.me-1
      | Sign Up

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>
  <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-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>
  <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: 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>
  <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-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>
  <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-accent
  | 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-accent
  | 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: Top

// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasTop").btn.btn-accent
  | Toggle bottom 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(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-accent
  | 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.

Mobile menu offcanvas (responsive)

<!-- Navbar with offcanvas menu on mobile -->
<header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
  <div class="container">
    <a href="#" class="navbar-brand me-2 me-xl-4">
      <img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
    </a>
    <button type="button" class="navbar-toggler ms-auto" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a href="#" class="btn btn-primary btn-sm ms-2 order-lg-3">
      <i class="fi-plus me-2"></i>
      Add<span class='d-none d-sm-inline'> listing</span>
    </a>
    <div class="offcanvas offcanvas-collapse order-lg-2" id="navbarNav">
      <div class="offcanvas-header shadow-sm">
        <h6 class="offcanvas-title">Menu</h6>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
      </div>
      <ul class="navbar-nav offcanvas-body mt-0 py-4 px-3 p-lg-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" role="button" data-bs-toggle="dropdown" aria-expanded="false">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" role="button" data-bs-toggle="dropdown" aria-expanded="false">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>
              <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>
</header>
// Navbar with offcanvas menu on mobile
header.navbar.navbar-expand-lg.navbar-light.bg-light.shadow-sm
  .container
    a(href="#").navbar-brand.me-2.me-xl-4
      img(src="path-to-logo-image", width="116", alt="Finder").d-block
    button(type="button", data-bs-toggle="offcanvas", data-bs-target="#navbarNav", aria-controls="navbarNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
      span.navbar-toggler-icon
    a(href="#").btn.btn-primary.btn-sm.ms-2.order-lg-3
      i.fi-plus.me-2
      | Add<span class="d-none d-sm-inline"> listing</span>
    #navbarNav.offcanvas.offcanvas-lg.order-lg-2
      .offcanvas-header.shadow-sm
        h6.offcanvas-title Menu
        button(type="button", data-bs-dismiss="offcanvas").btn-close
      ul.navbar-nav.offcanvas-body.mt-0.py-4.px-3.p-lg-0
        li.nav-item.active
          a(href="#").nav-link
            | Home
        li.nav-item
          a(href="#").nav-link
            | Link
        li.nav-item.dropdown
          a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").nav-link.dropdown-toggle
            | Dropdown
          ul.dropdown-menu
            li
              a(href="#").dropdown-item
                | Action link
            li.dropdown
              a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").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
              a(href="#").dropdown-item
                | Something else here
        li.nav-item
          a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled
            | Disabled
Top