Offcanvas

Copy

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

Copy

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