Default Offcanvas
<div class="flex items-center gap-6">
<a href="#" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="offcanvas-link" data-hs-overlay="#offcanvas-link">
Link with href
</a>
<button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="offcanvas-button" data-hs-overlay="#offcanvas-button">
Button with Offcanvas
</button>
<button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="offcanvas-dark" data-hs-overlay="#offcanvas-dark">
Dark Offcanvas
</button>
</div>
<!-- Link with Offcanvas start -->
<div id="offcanvas-link" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 end-0 transition-all duration-300 transform h-full max-w-xs w-full z-80 bg-white" role="dialog" tabindex="-1">
<div class="flex justify-between items-center py-3 px-4 border-b border-border-color">
<h3 class="font-semibold text-dark">
Link With Offcanvas
</h3>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-border-color bg-white hover:bg-danger text-danger hover:text-white focus:outline-hidden focus:bg-gray-200" aria-label="Close" data-hs-overlay="#offcanvas-link">
<span class="sr-only">Close</span>
<i class="icon-x"></i>
</button>
</div>
<div class="p-4">
<h5 class="mb-1">Title</h5>
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<!-- Link with Offcanvas start -->
<!-- Button Offcanvas start -->
<div id="offcanvas-button" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-80 bg-white border-s border-border-color" role="dialog" tabindex="-1">
<div class="flex justify-between items-center py-3 px-4 border-b border-border-color">
<h3 class="font-bold text-dark">
Button Offcanvas
</h3>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-border-color bg-white hover:bg-danger text-danger hover:text-white focus:outline-hidden focus:bg-gray-200" aria-label="Close" data-hs-overlay="#offcanvas-button">
<span class="sr-only">Close</span>
<i class="icon-x"></i>
</button>
</div>
<div class="p-4">
<h5 class="mb-1">Title</h5>
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<!-- Button Offcanvas end -->
<!-- Dark Offcanvas start -->
<div id="offcanvas-dark" class="hs-overlay bg-dark hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-80 border-s border-border-color" role="dialog" tabindex="-1" aria-labelledby="hs-offcanvas-dark-label">
<div class="flex justify-between items-center py-3 px-4 border-b border-border-color">
<h3 id="hs-offcanvas-dark-label" class="font-semibold text-white">
Dark Offcanvas
</h3>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-border-color bg-white hover:bg-danger text-danger hover:text-white focus:outline-hidden focus:bg-gray-200" aria-label="Close" data-hs-overlay="#offcanvas-dark">
<span class="sr-only">Close</span>
<i class="icon-x"></i>
</button>
</div>
<div class="p-4 text-white">
<h5 class="mb-1">Title</h5>
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<!-- Dark Offcanvas end -->
Positions Offcanvas
<div class="pb-5 mb-5 flex items-center xxl:gap-0 gap-3 justify-between flex-wrap border-b border-border-color">
<h5>Positions Offcanvas</h5>
<button type="button" data-toggle="code" class="flex items-center gap-2 border py-1.5 px-2.5 text-xs border-border-color font-semibold rounded-md bg-light-200 dark:bg-gray-100 focus:bg-primary focus:border-primary focus:text-white text-gray-900 dark:text-dark dark:focus:text-dark">
<i class="icon icon-eye"></i>
<span class="code-btn">Show Code</span>
</button>
</div>
<div class="flex items-center gap-6">
<button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="offcanvas-right" data-hs-overlay="#offcanvas-right">
Toggle right offcanvas
</button>
<button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="offcanvas-left" data-hs-overlay="#offcanvas-left">
Toggle left offcanvas
</button>
<button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="offcanvas-top" data-hs-overlay="#offcanvas-top">
Toggle top offcanvas
</button>
<button type="button" class="btn-sm text-white bg-primary inline-flex items-center" aria-haspopup="dialog" aria-expanded="false" aria-controls="offcanvas-bottom" data-hs-overlay="#offcanvas-bottom">
Toggle bottom offcanvas
</button>
</div>
<!-- Top Offcanvas start -->
<div id="offcanvas-top" class="hs-overlay hs-overlay-open:translate-y-0 -translate-y-full fixed top-0 inset-x-0 transition-all duration-300 transform max-h-40 size-full z-80 bg-white border-b border-border-color hidden" role="dialog" tabindex="-1" aria-labelledby="hs-offcanvas-top-label">
<div class="flex justify-between items-center py-3 px-4 border-b border-border-color">
<h3 id="hs-offcanvas-top-label" class="font-semibold text-dark">
Top Offcanvas
</h3>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-border-color bg-white hover:bg-danger text-danger hover:text-white focus:outline-hidden focus:bg-gray-200" aria-label="Close" data-hs-overlay="#offcanvas-top">
<span class="sr-only">Close</span>
<i class="icon-x"></i>
</button>
</div>
<div class="p-4">
<h5 class="mb-1">Title</h5>
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<!-- Top Offcanvas end -->
<!-- Left Offcanvas start -->
<div id="offcanvas-left" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-80 bg-white border-s border-border-color" role="dialog" tabindex="-1">
<div class="flex justify-between items-center py-3 px-4 border-b border-border-color">
<h3 class="font-bold text-dark">
Left Offcanvas
</h3>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-border-color bg-white hover:bg-danger text-danger hover:text-white focus:outline-hidden focus:bg-gray-200" aria-label="Close" data-hs-overlay="#offcanvas-left">
<span class="sr-only">Close</span>
<i class="icon-x"></i>
</button>
</div>
<div class="p-4">
<h5 class="mb-1">Title</h5>
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<!-- Left Offcanvas end -->
<!-- Bottom Offcanvas start -->
<div id="offcanvas-bottom" class="hs-overlay hs-overlay-open:translate-y-0 translate-y-full fixed bottom-0 inset-x-0 transition-all duration-300 transform max-h-40 size-full z-80 bg-white hidden" role="dialog" tabindex="-1" aria-labelledby="hs-offcanvas-bottom-label">
<div class="flex justify-between items-center py-3 px-4 border-b border-border-color">
<h3 id="hs-offcanvas-bottom-label" class="font-semibold text-dark">
Bottom Offcanvas
</h3>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-border-color bg-white hover:bg-danger text-danger hover:text-white focus:outline-hidden focus:bg-gray-200" aria-label="Close" data-hs-overlay="#offcanvas-bottom">
<span class="sr-only">Close</span>
<i class="icon-x"></i>
</button>
</div>
<div class="p-4">
<h5 class="mb-1">Title</h5>
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<!-- Bottom Offcanvas start -->
<!-- Right Offcanvas start -->
<div id="offcanvas-right" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 end-0 transition-all duration-300 transform h-full max-w-xs w-full z-80 bg-white" role="dialog" tabindex="-1">
<div class="flex justify-between items-center py-3 px-4 border-b border-border-color">
<h3 class="font-semibold text-dark">
Right Offcanvas
</h3>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-border-color bg-white hover:bg-danger text-danger hover:text-white focus:outline-hidden focus:bg-gray-200" aria-label="Close" data-hs-overlay="#offcanvas-right">
<span class="sr-only">Close</span>
<i class="icon-x"></i>
</button>
</div>
<div class="p-4">
<h5 class="mb-1">Title</h5>
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<!-- Right Offcanvas start -->
Link With Offcanvas
Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Button Offcanvas
Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Dark Offcanvas
Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Top Offcanvas
Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Left Offcanvas
Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Bottom Offcanvas
Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Right Offcanvas
Title
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.