Left 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.

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.

AroundUI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, widgets etc.

Bootstrap docs

Offcanvas components

<!-- 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

Placement

<!-- 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.

Mobile menu offcanvas (responsive)

<!-- 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