Offcanvas | Dreams AI Agent - Agent Builder Tailwind Admin Template

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