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