Offcanvas

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

Offcanvas components

<!-- Offcanvas. Remove .show class to hide offcanvas initially -->
<div class="offcanvas offcanvas-start show" id="offcanvas" tabindex="-1" aria-labelledby="offcanvasLabel">

  <!-- Offcanvas header -->
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Menu</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <!-- Offcanvas body -->
  <div class="offcanvas-body pt-0">
    <nav class="list-group list-group-borderless">
      <a class="list-group-item list-group-item-action active" href="#" aria-current="page">
        Home
      </a>
      <a class="list-group-item list-group-item-action" href="#">
        User profile
      </a>
      <a class="list-group-item list-group-item-action" href="#">
        Services
      </a>
      <a class="list-group-item list-group-item-action" href="#">
        Our works
      </a>
      <a class="list-group-item list-group-item-action" href="#">
        About
      </a>
      <a class="list-group-item list-group-item-action" href="#">
        Our team
      </a>
      <a class="list-group-item list-group-item-action" href="#">
        Dashboard
      </a>
      <a class="list-group-item list-group-item-action" href="#">
        Contact
      </a>
      <a class="list-group-item list-group-item-action" href="#">
        Help center
      </a>
      <a class="list-group-item list-group-item-action" href="#">
        Support
      </a>
    </nav>
  </div>

  <!-- Offcanvas footer -->
  <div class="offcanvas-header d-flex border-top">
    <button type="button" class="btn btn-primary w-100 me-3">
      <i class="ci-log-in fs-base ms-n1 me-2"></i>
      Login
    </button>
    <button type="button" class="btn btn-outline-primary w-100">
      <i class="ci-user ms-n1 me-2"></i>
      Sign up
    </button>
  </div>
</div>

Placement

<!-- Left offcanvas toggle button -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">
  Toggle left offcanvas
</button>

<!-- Left offcanvas example -->
<div class="offcanvas offcanvas-start" id="offcanvasLeft" tabindex="-1" aria-labelledby="offcanvasLeftLabel">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title" id="offcanvasLeftLabel">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 or Cartzilla component or custom elements here.</p>
  </div>
</div>


<!-- Top offcanvas toggle button -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
  Toggle top offcanvas
</button>

<!-- Top offcanvas example -->
<div class="offcanvas offcanvas-top" id="offcanvasTop" tabindex="-1" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">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 or Cartzilla component or custom elements here.</p>
  </div>
</div>


<!-- Right offcanvas toggle button -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
  Toggle right offcanvas
</button>

<!-- Right offcanvas example -->
<div class="offcanvas offcanvas-end" id="offcanvasRight" tabindex="-1" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">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 or Cartzilla component or custom elements here.</p>
  </div>
</div>

<!-- Bottom offcanvas toggle button -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
  Toggle bottom offcanvas
</button>

<!-- Bottom offcanvas example -->
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">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 or Cartzilla component or custom elements here.</p>
  </div>
</div>

Mobile menu (responsive)

<!-- Navbar with offcanvas menu on screens smaller than 500px (xs) -->
<header class="navbar navbar-expand-lg bg-body sticky-top p-0">
  <div class="container py-3">

    <!-- Navbar brand (Logo) -->
    <a class="navbar-brand" href="#">
      <span class="d-flex flex-shrink-0 text-primary me-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"/><g fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"/><use href="#czlogo"/><use href="#czlogo" x="8.516" y="-2.172"/></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"/></defs></svg>
      </span>
      Cartzilla
    </a>

    <!-- Menu toggler -->
    <button type="button" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas" aria-controls="navbarOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Offcanvas menu -->
    <div class="offcanvas offcanvas-end" id="navbarOffcanvas" tabindex="-1" aria-labelledby="navbarOffcanvasLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="navbarOffcanvasLabel">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 ms-lg-4">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action link</a></li>
              <li class="dropend">
                <a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action link</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><a class="dropdown-item" href="#">Yet another link</a></li>
                </ul>
              </li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li class="dropdown-divider"><hr></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem

Left offcanvas

Top offcanvas

Right offcanvas

Bottom offcanvas

Cartzilla

Offcanvas

Offcanvas components

Menu

Placement

Mobile menu (responsive)