Cartzilla Docs | Offcanvas

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>