Offcanvas

Hidden sidebars built with CSS and JS for toggling viewport content.

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