Offcanvas

Offcanvas component, often referred to as a Drawer, offers a hidden sidebar solution for various applications such as navigation menus, shopping carts, and more, enhancing the user interface while maximizing space.

Example

Offcanvas start from Left Side

<button type="button" class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" role="button" aria-controls="offcanvasExample">
                        Offcanvas Start
                        </button>
                        <div
                           class="offcanvas -translate-x-full fixed top-0 start-0 border-r border-gray-300 transition-all duration-300 transform h-full invisible bg-white z-50 max-w-xs"
                           tabindex="-1"
                           id="offcanvasExample"
                           aria-labelledby="offcanvasExampleLabel"
                           >
                           <div class="flex items-center p-4">
                              <h5 class="text-lg" id="offcanvasExampleLabel">Offcanvas</h5>
                              <button type="button" class="btn-close"></button>
                              <button
                                 type="button"
                                 data-bs-dismiss="offcanvas"
                                 aria-label="Close"
                                 class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center "
                                 >
                                 <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                                 </svg>
                                 <span class="sr-only">Close menu</span>
                              </button>
                           </div>
                           <div class="p-4">
                              <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
                              <div class="dropdown mt-3">
                                 <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
                                 <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                 </ul>
                              </div>
                           </div>
                        </div>

Right Offcanvas

Offcanvas start from Right Side

<button type="button" class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" role="button" aria-controls="offcanvasRight">
                        Offcanvas Right
  </button>
  <div
     class="offcanvas translate-x-full fixed top-0 right-0 border-l border-gray-300 transition-all duration-300 transform h-full invisible bg-white z-50 max-w-xs"
     tabindex="-1"
     id="offcanvasRight"
     aria-labelledby="offcanvasRightLabel"
     >
     <div class="flex items-center p-4">
        <h5 class="text-lg" id="offcanvasRightLabel">Offcanvas</h5>
        <button type="button" class="btn-close"></button>
        <button
           type="button"
           data-bs-dismiss="offcanvas"
           aria-label="Close"
           class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center "
           >
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
           </svg>
           <span class="sr-only">Close menu</span>
        </button>
     </div>
     <div class="p-4">
        <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
        <div class="dropdown mt-3">
           <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
           <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
           </ul>
        </div>
     </div>
  </div>

Bottom Offcanvas

Offcanvas start from Bottom Side

<button type="button" class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" role="button" aria-controls="offcanvasBottom">
                        Offcanvas Bottom
 </button>
 <div
    class="offcanvas translate-y-full fixed bottom-0 border-t right-0 left-0 border-gray-300 transition-all duration-300 w-full invisible bg-white z-50 max-h-xs"
    tabindex="-1"
    id="offcanvasBottom"
    aria-labelledby="offcanvasBottomLabel"
    >
    <div class="flex items-center p-4">
       <h5 class="text-lg" id="offcanvasBottomLabel">Offcanvas</h5>
       <button type="button" class="btn-close"></button>
       <button
          type="button"
          data-bs-dismiss="offcanvas"
          aria-label="Close"
          class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center "
          >
          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
          </svg>
          <span class="sr-only">Close menu</span>
       </button>
    </div>
    <div class="p-4">
       <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
       <div class="dropdown mt-3">
          <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
       </div>
    </div>
 </div>

Top Offcanvas

Offcanvas start from Top Side

<button type="button" class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" role="button" aria-controls="offcanvasTop">
                        Offcanvas Top
                        </button>
                        <div
                           class="offcanvas -translate-y-full fixed top-0 border-t right-0 left-0 border-gray-300 transition-all duration-300 w-full invisible bg-white z-50 max-h-xs"
                           tabindex="-1"
                           id="offcanvasTop"
                           aria-labelledby="offcanvasTopLabel"
                           >
                           <div class="flex items-center p-4">
                              <h5 class="text-lg" id="offcanvasTopLabel">Offcanvas</h5>
                              <button type="button" class="btn-close"></button>
                              <button
                                 type="button"
                                 data-bs-dismiss="offcanvas"
                                 aria-label="Close"
                                 class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center "
                                 >
                                 <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                                 </svg>
                                 <span class="sr-only">Close menu</span>
                              </button>
                           </div>
                           <div class="p-4">
                              <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
                              <div class="dropdown mt-3">
                                 <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
                                 <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                 </ul>
                              </div>
                           </div>
                        </div>

Body scrolling

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to enable <body< scrolling.

<button type="button" class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBodyScroll" role="button" aria-controls="offcanvasBodyScroll">
                        Offcanvas Start
  </button>
  <div
     class="offcanvas -translate-x-full fixed top-0 start-0 border-r border-gray-300 transition-all duration-300 transform h-full invisible bg-white z-50 max-w-xs"
     data-bs-scroll="true" data-bs-backdrop="false"
     tabindex="-1"
     id="offcanvasBodyScroll"
     aria-labelledby="offcanvasBodyScrollLabel"
     >
     <div class="flex items-center p-4">
        <h5 class="text-lg" id="offcanvasBodyScrollLabel">Offcanvas</h5>
        <button type="button" class="btn-close"></button>
        <button
           type="button"
           data-bs-dismiss="offcanvas"
           aria-label="Close"
           class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center "
           >
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
           </svg>
           <span class="sr-only">Close menu</span>
        </button>
     </div>
     <div class="p-4">
        <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
        <div class="dropdown mt-3">
           <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
           <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
           </ul>
        </div>
     </div>
  </div>