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 Left from Left Side
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<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"
aria-controls="offcanvasExample">
Offcanvas Left
</button>
<div
class="offcanvas -translate-x-full fixed top-0 left-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 justify-between">
<h5 class="text-lg" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</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 gap-x-2 bg-gray-300 text-gray-700 border-gray-300 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 me-1 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 Left from Right Side
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<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"
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 justify-between">
<h5 class="text-lg" id="offcanvasRightLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</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 gap-x-2 bg-gray-300 text-gray-700 border-gray-300 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 me-1 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 Left from Bottom Side
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<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"
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-40"
tabindex="-1"
id="offcanvasBottom"
aria-labelledby="offcanvasBottomLabel">
<div class="flex items-center p-4 justify-between">
<h5 class="text-lg" id="offcanvasBottomLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</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 gap-x-2 bg-gray-300 text-gray-700 border-gray-300 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 me-1 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 Left from Top Side
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<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"
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-40"
tabindex="-1"
id="offcanvasTop"
aria-labelledby="offcanvasTopLabel">
<div class="flex items-center p-4 justify-between">
<h5 class="text-lg" id="offcanvasTopLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</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 gap-x-2 bg-gray-300 text-gray-700 border-gray-300 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 me-1 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.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<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"
aria-controls="offcanvasBodyScroll">
Offcanvas Left
</button>
<div
class="offcanvas -translate-x-full fixed top-0 left-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 justify-between">
<h5 class="text-lg" id="offcanvasBodyScrollLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</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 gap-x-2 bg-gray-300 text-gray-700 border-gray-300 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 me-1 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>