Tailwind CSS Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Live Demo
Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the
.show
class on an element with the
.offcanvas
class.
Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<a
class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
data-bs-toggle="offcanvas"
href="#offcanvasExample"
role="button"
aria-controls="offcanvasExample"
>
Link with href
</a>
<button
class="ml-2 btn inline-flex items-center gap-x-2 bg-gray-200 text-gray-800 border-gray-200 border 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"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasExample"
role="button"
aria-controls="offcanvasExample"
>
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-left" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-inherit" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-x text-gray-700"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</button>
</div>
<div class="offcanvas-body 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>
</div>Placement
Try the top, right, and bottom examples out below.
Top Offcanvas
Bottom Offcanvas
Right Offcanvas
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<a
class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
data-bs-toggle="offcanvas"
href="#offcanvasTop"
role="button"
aria-controls="offcanvasTop"
>
Top Offcanvas
</a>
<a
class="ml-2 btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
data-bs-toggle="offcanvas"
href="#offcanvasBottom"
role="button"
aria-controls="offcanvasBottom"
>
Bottom Offcanvas
</a>
<a
class="ml-2 btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
data-bs-toggle="offcanvas"
href="#offcanvasRight"
role="button"
aria-controls="offcanvasRight"
>
Right Offcanvas
</a>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas</h5>
<button type="button" class="btn-close text-inherit" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-x text-gray-700"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</button>
</div>
<div class="offcanvas-body 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>
</div>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas</h5>
<button type="button" class="btn-close text-inherit" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-x text-gray-700"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</button>
</div>
<div class="offcanvas-body 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>
</div>
<div class="offcanvas offcanvas-right" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas</h5>
<button type="button" class="btn-close text-inherit" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-x text-gray-700"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</button>
</div>
<div class="offcanvas-body 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>
</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.
Enable body scrolling
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<a
class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
data-bs-toggle="offcanvas"
href="#offcanvasBodyScroll"
role="button"
aria-controls="offcanvasBodyScroll"
>
Enable body scrolling
</a>
<div class="offcanvas offcanvas-left" data-bs-scroll="true" tabindex="-1" id="offcanvasBodyScroll" aria-labelledby="offcanvasBodyScrollLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas</h5>
<button type="button" class="btn-close text-inherit" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-x text-gray-700"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</button>
</div>
<div class="offcanvas-body 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>
</div>Static backdrop
When backdrop is set to static, the offcanvas will not close when clicking outside of it.
Toggle static offcanvas
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<a
class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
data-bs-toggle="offcanvas"
href="#staticOffcanvas"
role="button"
aria-controls="staticOffcanvas"
>
Toggle static offcanvas
</a>
<div class="offcanvas offcanvas-left" data-bs-backdrop="static" tabindex="-1" id="staticOffcanvas" aria-labelledby="staticOffcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas</h5>
<button type="button" class="btn-close text-inherit" data-bs-dismiss="offcanvas" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-x text-gray-700"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</button>
</div>
<div class="offcanvas-body 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>
</div>