Offcanvas
Offcanvas.
Make use of Tailwind's unique Offcanvas styles to enhance your website's navigation and sidebar experience by providing a smooth, responsive way to reveal additional content or menus from the side of the screen.
OffcanvasOffcanvas
Live Demo
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<div x-data="{}" class="mb-3">
<a class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="$dispatch('offcanvas-ex')" href="#offcanvasExample">Link with href</a>
</div>
<div x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex.window="offcanvas = !offcanvas" id="offcanvasExample">
<div class="fixed top-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" @click="offcanvas = false"></div>
<div class="fixed top-0 left-0 flex flex-col sm:w-[400px] w-[350px] h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper -translate-x-full" x-show="offcanvas" :class="{ '!translate-x-0': offcanvas }">
<div class="flex items-center justify-between p-4">
<h5 class="offcanvas-title">Offcanvas</h5>
<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
</div>
<div class="p-4">
<p class="mb-4">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="relative mb-4" x-data="{ open: false }">
<button type="button" class="btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white dropdown-toggle" @click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-[2]"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Another action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
Body Scrolling
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<div x-data="{}" class="mb-3">
<a class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="$dispatch('offcanvas-ex1')">Enable body scrolling</a>
</div>
<div x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex1.window="offcanvas = !offcanvas">
<div class="fixed top-0 left-0 flex flex-col sm:w-[400px] w-[350px] h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper -translate-x-full" x-show="offcanvas" :class="{ '!translate-x-0': offcanvas }">
<div class="flex items-center justify-between p-4">
<h5 class="offcanvas-title">Offcanvas</h5>
<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
</div>
<div class="p-4">
<p class="mb-4">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="relative mb-4" x-data="{ open: false }">
<button type="button" class="btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white dropdown-toggle" @click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-[2]"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Another action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
Body scrolling and backdrop
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<div x-data="{}" class="mb-3">
<a class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="$dispatch('offcanvas-ex2')">Enable both scrolling & backdrop</a>
</div>
<div x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex2.window="offcanvas = !offcanvas">
<div class="fixed top-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" @click="offcanvas = false"></div>
<div class="fixed top-0 left-0 flex flex-col sm:w-[400px] w-[350px] h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper -translate-x-full" x-show="offcanvas" :class="{ '!translate-x-0': offcanvas }">
<div class="flex items-center justify-between p-4">
<h5 class="offcanvas-title">Offcanvas</h5>
<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
</div>
<div class="p-4">
<p class="mb-4">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="relative mb-4" x-data="{ open: false }">
<button type="button" class="btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white dropdown-toggle" @click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-[2]"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Another action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
Static backdrop
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<div x-data="{}" class="mb-3">
<a class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="$dispatch('offcanvas-ex3')">Toggle static offcanvas</a>
</div>
<div x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex3.window="offcanvas = !offcanvas">
<div class="fixed top-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas"></div>
<div class="fixed top-0 left-0 flex flex-col sm:w-[400px] w-[350px] h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper -translate-x-full" x-show="offcanvas" :class="{ '!translate-x-0': offcanvas }">
<div class="flex items-center justify-between p-4">
<h5 class="offcanvas-title">Offcanvas</h5>
<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
</div>
<div class="p-4">
<p class="mb-4">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="relative mb-4" x-data="{ open: false }">
<button type="button" class="btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white dropdown-toggle" @click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-[2]"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Another action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
Placement
Offcanvas Top
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Offcanvas right
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas bottom
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<div x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex4.window="offcanvas = !offcanvas">
<div class="fixed top-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" @click="offcanvas = false"></div>
<div class="fixed top-0 left-0 flex flex-col w-full z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper -translate-y-full" x-show="offcanvas" :class="{ '!translate-y-0': offcanvas }">
<div class="flex items-center justify-between p-4">
<h5 class="offcanvas-title">Offcanvas Top</h5>
<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
</div>
<div class="p-4">
<p class="mb-4">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</p>
</div>
</div>
</div>
</div>
<div x-data="{}" class="mb-3 mr-3">
<a class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="$dispatch('offcanvas-ex4')">Toggle top offcanvas</a>
</div>
<div x-data="{}" class="mb-3 mr-3">
<a class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="$dispatch('offcanvas-ex5')">Toggle right offcanvas</a>
</div>
<div x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex5.window="offcanvas = !offcanvas">
<div class="fixed top-0 right-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" @click="offcanvas = false"></div>
<div class="fixed top-0 right-0 flex flex-col sm:w-[400px] w-[350px] h-screen z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper translate-x-full" x-show="offcanvas" :class="{ '!translate-x-0': offcanvas }">
<div class="flex items-center justify-between p-4">
<h5 class="offcanvas-title">Offcanvas right</h5>
<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
</div>
<div class="p-4">
<p class="mb-4">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="relative mb-4" x-data="{ open: false }">
<button type="button" class="btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white dropdown-toggle" @click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-[2]"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Another action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div x-data="{}" class="mb-3 mr-3">
<a class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="$dispatch('offcanvas-ex6')">Toggle bottom offcanvas</a>
</div>
<div x-data="{ offcanvas: false }">
<div x-on:offcanvas-ex6.window="offcanvas = !offcanvas">
<div class="fixed top-0 left-0 z-999 w-screen h-screen bg-black/50" x-show="offcanvas" @click="offcanvas = false"></div>
<div class="fixed bottom-0 left-0 flex flex-col w-full z-9999 bg-card duration-500 ease-in-out offcanvas-wrapper translate-y-full" x-show="offcanvas" :class="{ '!translate-y-0': offcanvas }">
<div class="flex items-center justify-between p-4">
<h5 class="offcanvas-title">Offcanvas bottom</h5>
<button type="button" class="btn-close dark:invert" @click="offcanvas = false"></button>
</div>
<div class="p-4">
<p class="mb-4">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="relative mb-4" x-data="{ open: false }">
<button type="button" class="btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white dropdown-toggle" @click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute bottom-full min-w-40 mb-1 z-[2]"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Another action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary"
@click="open = false" href="javascript:void(0);">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>