Components
Tailwind CSS Drawer
The Drawer component can display additional information in a variety of forms and locations and be utilised as a hidden off-canvas sidebar for navigation.
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Requires Pagedone JS
This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.
To display a fixed element in relation to the document page from either side for user actions, contact forms, navigation, or other reasons, utilise the Drawer component, sometimes known as "off-canvas."
Numerous settings are available, including location, body scrolling, backdrop display and hiding, and the ability to swipe the edge to reveal a portion of the drawer when it is not fully visible.
To use this component use need to
- Add
drawer-buttonclass to button element - Add
data-drawer-target="{id}"data attribute must be assigned to some element such a button, with the value being the id of the drawer component itself, in order to start the drawer component. - Add same
{id}to drawer body which you have added in data-drawer-target.
The drawer component's id may then be used as the value for the following attributes, which you can use to show, conceal, or toggle the drawer visibility:
Drawer Placement
You can also place drawer in different direction such as
{top|bottom|left|right} for that you need to add
data-drawer-postion="{position}"
<div class="text-center h-[800px]">
<button class="drawer-button py-2.5 px-5 text-xs bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" type="button" data-drawer-target="drawer-left-example" data-drawer-show="drawer-left-example" data-drawer-position="left" aria-controls="drawer-left-example"> Show drawer Left </button>
</div>
<!-- drawer component -->
<div id="drawer-left-example" class="w-96 absolute left-0 top-0 z-40 pl-9 pr-3 pb-11 overflow-y-auto transition-transform -translate-x-full bg-white " tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
<h2 id="drawer-label" class="text-gray-900 text-lg font-semibold leading-7 pt-6">Notification </h2>
<p class="text-black text-opacity-20 text-sm font-normal leading-snug">Drawer notification panel</p>
<button type="button" data-drawer-hide="drawer-left-example" aria-controls="drawer-left-example" data-drawer-position="left" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-6 right-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close menu</span>
</button>
<div class="py-6">
<div class="flex gap-3 mb-4">
<img src="https://pagedone.io/asset/uploads/1704349514.png" alt="Hailey image" class="w-12 h-12">
<div>
<h5 class="text-gray-900 text-sm font-medium leading-snug mb-1">Hailey Garza <span class="text-gray-500">added new tags to Ease Design System</span>
</h5>
<h6 class="text-gray-500 text-xs font-normal leading-[18px]">Account | Friday, 10:03 AM</h6>
</div>
</div>
<div class="flex gap-3 mb-4">
<img src="https://pagedone.io/asset/uploads/1704351103.png" alt="Brandon image" class="w-12 h-12">
<div>
<h5 class="text-gray-900 text-sm font-medium leading-snug mb-1">Brandon Newman <span class="text-gray-500">Liked your Pagedone 045-favourites-2h ago</span>
</h5>
<h6 class="text-gray-500 text-xs font-normal leading-[18px]">Friday, 10:03 AM</h6>
</div>
</div>
<div class="flex gap-3 mb-4">
<img src="https://pagedone.io/asset/uploads/1705646315.png" alt="Justi image" class="w-12 h-12">
<div>
<h5 class="text-gray-900 text-sm font-medium leading-snug mb-1">Justi Bolt <span class="text-gray-500">Started Following</span>
</h5>
<h6 class="text-gray-500 text-xs font-normal leading-[18px]">Friday, 10:03 AM</h6>
</div>
</div>
<div class="flex gap-3">
<img src="https://pagedone.io/asset/uploads/1705646299.png" alt="Dave image" class="w-12 h-12">
<div>
<h5 class="text-gray-900 text-sm font-medium leading-snug mb-1">Dave Wood <span class="text-gray-500">Started Following</span>
</h5>
<h6 class="text-gray-500 text-xs font-normal leading-[18px]">Friday, 10:03 AM</h6>
</div>
</div>
</div>
<h2 class="text-gray-900 text-base font-semibold leading-relaxed mb-4">This Week</h2>
<div class="flex gap-3 mb-4">
<img src="https://pagedone.io/asset/uploads/1705646924.png" alt="Kate image" class="w-12 h-12">
<div>
<h5 class="text-gray-900 text-sm font-medium leading-snug mb-1">Kate Young <span class="text-gray-500">Like your post</span>
</h5>
<h6 class="text-gray-500 text-xs font-normal leading-[18px]">Account | Friday, 10:03 AM</h6>
</div>
</div>
<div class="flex gap-3 mb-4">
<img src="https://pagedone.io/asset/uploads/1705646894.png" alt="Shanaya image" class="w-12 h-12">
<div>
<h5 class="text-gray-900 text-sm font-medium leading-snug mb-1">Shanaya Kale <span class="text-gray-500">commented on your post</span>
</h5>
<h6 class="text-gray-500 text-xs font-normal leading-[18px]">Friday, 10:03 AM</h6>
</div>
</div>
<div class="flex gap-3 mb-4">
<img src="https://pagedone.io/asset/uploads/1705646880.png" alt="Angelina image" class="w-12 h-12">
<div>
<h5 class="text-gray-900 text-sm font-medium leading-snug mb-1">Angelina <span class="text-gray-500">Messages you "Do you want to go see a movie tonight?"</span>
</h5>
<h6 class="text-gray-500 text-xs font-normal leading-[18px]">Friday, 10:03 AM</h6>
</div>
</div>
<div class="flex gap-3">
<img src="https://pagedone.io/asset/uploads/1705647084.png" alt="Natasha image" class="w-12 h-12">
<div class="">
<div class="pb-3">
<h5 class="text-gray-900 text-sm font-medium leading-snug mb-1">Natasha <span class="text-gray-500">Send you competitors analysis document</span>
</h5>
<h6 class="text-gray-500 text-xs font-normal leading-[18px]">Friday, 10:03 AM</h6>
</div>
<div class="flex gap-1 p-3 bg-gray-50 rounded-lg w-fit">
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="File">
<path id="icon" d="M26.9018 9.01473L27.4998 8.48324V8.48324L26.9018 9.01473ZM24.3571 6.15194L23.7592 6.68343L23.7592 6.68343L24.3571 6.15194ZM22.5548 4.49865L22.2271 5.22845V5.22845L22.5548 4.49865ZM28.1482 10.6953L27.4004 10.9796V10.9796L28.1482 10.6953ZM27.0884 28.5052L27.6541 29.0709H27.6541L27.0884 28.5052ZM20.5959 9.76109L21.3806 9.60502L20.5959 9.76109ZM22.8221 11.9872L22.666 12.7719L22.8221 11.9872ZM9.9165 17.6167C9.47468 17.6167 9.1165 17.9748 9.1165 18.4167C9.1165 18.8585 9.47468 19.2167 9.9165 19.2167V17.6167ZM21.2498 19.2167C21.6917 19.2167 22.0498 18.8585 22.0498 18.4167C22.0498 17.9748 21.6917 17.6167 21.2498 17.6167V19.2167ZM9.9165 21.8667C9.47468 21.8667 9.1165 22.2248 9.1165 22.6667C9.1165 23.1085 9.47468 23.4667 9.9165 23.4667V21.8667ZM16.9998 23.4667C17.4417 23.4667 17.7998 23.1085 17.7998 22.6667C17.7998 22.2248 17.4417 21.8667 16.9998 21.8667V23.4667ZM19.8332 28.95H14.1665V30.55H19.8332V28.95ZM6.4665 21.25V12.75H4.8665V21.25H6.4665ZM27.5332 12.7795V21.25H29.1332V12.7795H27.5332ZM14.1665 5.05H20.1218V3.45H14.1665V5.05ZM20.1218 5.05C21.446 5.05 21.8663 5.06639 22.2271 5.22845L22.8826 3.76886C22.136 3.43361 21.3034 3.45 20.1218 3.45V5.05ZM24.955 5.62045C24.17 4.73732 23.6291 4.10411 22.8826 3.76886L22.2271 5.22845C22.588 5.3905 22.8794 5.69371 23.7592 6.68343L24.955 5.62045ZM29.1332 12.7795C29.1332 11.7738 29.1453 11.0667 28.896 10.411L27.4004 10.9796C27.5211 11.2969 27.5332 11.6549 27.5332 12.7795H29.1332ZM26.3039 9.54623C27.051 10.3868 27.2798 10.6623 27.4004 10.9796L28.896 10.411C28.6467 9.75537 28.1679 9.23486 27.4998 8.48324L26.3039 9.54623ZM14.1665 28.95C12.1404 28.95 10.7013 28.9483 9.6097 28.8015C8.54107 28.6579 7.92597 28.3885 7.47699 27.9395L6.34561 29.0709C7.14143 29.8667 8.15046 30.2197 9.3965 30.3873C10.6195 30.5517 12.1857 30.55 14.1665 30.55V28.95ZM4.8665 21.25C4.8665 23.2309 4.8648 24.797 5.02924 26.02C5.19676 27.266 5.5498 28.2751 6.34561 29.0709L7.47699 27.9395C7.028 27.4905 6.75864 26.8754 6.61497 25.8068C6.4682 24.7152 6.4665 23.2761 6.4665 21.25H4.8665ZM19.8332 30.55C21.814 30.55 23.3801 30.5517 24.6032 30.3873C25.8492 30.2197 26.8582 29.8667 27.6541 29.0709L26.5227 27.9395C26.0737 28.3885 25.4586 28.6579 24.39 28.8015C23.2983 28.9483 21.8593 28.95 19.8332 28.95V30.55ZM27.5332 21.25C27.5332 23.2761 27.5315 24.7152 27.3847 25.8068C27.241 26.8754 26.9717 27.4905 26.5227 27.9395L27.6541 29.0709C28.4499 28.2751 28.8029 27.266 28.9704 26.02C29.1349 24.797 29.1332 23.2309 29.1332 21.25H27.5332ZM6.4665 12.75C6.4665 10.7239 6.4682 9.28483 6.61497 8.19319C6.75864 7.12457 7.028 6.50946 7.47699 6.06048L6.34561 4.92911C5.5498 5.72492 5.19676 6.73395 5.02924 7.98C4.8648 9.20303 4.8665 10.7691 4.8665 12.75H6.4665ZM14.1665 3.45C12.1857 3.45 10.6195 3.4483 9.3965 3.61273C8.15046 3.78026 7.14143 4.1333 6.34561 4.92911L7.47699 6.06048C7.92597 5.6115 8.54107 5.34214 9.6097 5.19847C10.7013 5.0517 12.1404 5.05 14.1665 5.05V3.45ZM19.7415 4.25V8.5H21.3415V4.25H19.7415ZM24.0832 12.8417H28.3332V11.2417H24.0832V12.8417ZM19.7415 8.5C19.7415 9.11992 19.7376 9.54671 19.8113 9.91716L21.3806 9.60502C21.3454 9.42808 21.3415 9.19661 21.3415 8.5H19.7415ZM24.0832 11.2417C23.3866 11.2417 23.1551 11.2378 22.9782 11.2026L22.666 12.7719C23.0365 12.8455 23.4633 12.8417 24.0832 12.8417V11.2417ZM19.8113 9.91716C20.098 11.3585 21.2247 12.4852 22.666 12.7719L22.9782 11.2026C22.1716 11.0422 21.541 10.4116 21.3806 9.60502L19.8113 9.91716ZM9.9165 19.2167H21.2498V17.6167H9.9165V19.2167ZM9.9165 23.4667H16.9998V21.8667H9.9165V23.4667ZM27.4998 8.48324L24.955 5.62045L23.7592 6.68343L26.3039 9.54623L27.4998 8.48324Z" fill="#6B7280" />
</g>
</svg>
<div>
<h5 class="text-gray-900 text-xs font-medium leading-4 pb-0.5">Competitors analysis</h5>
<h6 class="text-gray-500 text-xs font-normal leading-4">56 Mb</h6>
</div>
</div>
</div>
</div>
</div>
Examples
Tailwind CSS Drawer Examples
The Drawer component can display additional information in a variety of forms and locations and be utilised as a hidden off-canvas sidebar for navigation.
Simple Bottom Drawer Example
Bottom drawer sliding up from screen bottom with header, content area, and footer buttons
<div class="relative">
<div class="text-center">
<button
class="drawer-button py-2.5 px-4 text-sm rounded-md cursor-pointer font-semibold text-center border bg-white shadow-xs transition-all duration-500"
type="button" data-drawer-target="drawer-bottom-example"
data-drawer-show="drawer-bottom-example" data-drawer-position="bottom"
aria-controls="drawer-bottom-example">
Open Drawer
</button>
</div>
<!-- drawer component -->
<div id="drawer-bottom-example"
class="fixed inset-x-0 bottom-0 z-40 max-h-[80vh] w-full px-4 pb-4 overflow-y-auto transition-transform translate-y-full bg-white shadow-lg border-t"
tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
<div class="bg-gray-100 mx-auto mt-2 h-2 w-20 rounded-full cursor-pointer">
</div>
<div class="flex flex-col gap-0.5 p-4">
<h3 class="font-medium text-base text-center">Drawer Title</h3>
<p class="text-neutral-500 text-sm text-center">This is a simple bottom drawer with header
and
footer.</p>
</div>
<div class="py-4">
<p class="text-neutral-500 text-sm">Add your content here. This drawer slides up from the
bottom.</p>
</div>
<div class="flex flex-col gap-2">
<button
class="rounded-md text-sm font-medium transition-all duration-500 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white w-full">Submit</button>
<button type="button" data-drawer-hide="drawer-bottom-example"
aria-controls="drawer-bottom-example" data-drawer-position="bottom"
class="black bg-transparent border hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-full font-medium py-2 px-4 mx-auto flex items-center justify-center transition-all duration-500">
Close
</button>
</div>
</div>
</div>Bottom Drawer with Form Example
A bottom drawer with form inputs for name, email, and phone using Tailwind CSS Input and Label for mobile-friendly data entry
<div class="relative w-full">
<div class="text-center">
<button
class="drawer-button py-2.5 px-4 border text-sm rounded-md cursor-pointer font-semibold text-center bg-white shadow-xs transition-all duration-500"
type="button" data-drawer-target="drawer-bottom2-example"
data-drawer-show="drawer-bottom2-example" data-drawer-position="bottom"
aria-controls="drawer-bottom2-example">
Add Contact
</button>
</div>
<!-- drawer component -->
<div id="drawer-bottom2-example"
class="fixed inset-x-0 bottom-0 z-40 max-h-[80vh] w-full px-4 pb-4 overflow-y-auto transition-transform translate-y-full bg-white shadow-lg border-t"
tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
<div class="bg-gray-100 mx-auto mt-2 h-2 w-20 rounded-full cursor-pointer">
</div>
<div class="flex flex-col gap-0.5 p-4">
<h3 class="font-medium text-base text-center">Add New Contact</h3>
<p class="text-neutral-500 text-sm text-center">Fill in the details below to add a new
contact.</p>
</div>
<div class="flex flex-col gap-4 pb-4">
<div class="flex flex-col gap-2">
<label for="name" class="text-sm font-medium">Name</label>
<input type="text"
class="py-1 px-3 h-9 w-full border border-gray-200 rounded-md shadow-xs text-base outline-none transition-all duration-500 hover:border-gray-400 focus:border-gray-400"
placeholder="Enter name">
</div>
<div class="flex flex-col gap-2">
<label for="name" class="text-sm font-medium">Email</label>
<input type="text"
class="py-1 px-3 h-9 w-full border border-gray-200 rounded-md shadow-xs text-base outline-none transition-all duration-500 hover:border-gray-400 focus:border-gray-400"
placeholder="Enter email">
</div>
<div class="flex flex-col gap-2">
<label for="name" class="text-sm font-medium">Phone</label>
<input type="text"
class="py-1 px-3 h-9 w-full border border-gray-200 rounded-md shadow-xs text-base outline-none transition-all duration-500 hover:border-gray-400 focus:border-gray-400"
placeholder="Enter phone number">
</div>
</div>
<div class="flex flex-col gap-2">
<button
class="rounded-md text-sm font-medium transition-all duration-500 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white w-full">Submit</button>
<button type="button" data-drawer-hide="drawer-bottom2-example"
aria-controls="drawer-bottom2-example" data-drawer-position="bottom"
class="black bg-transparent border hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-full font-medium py-2 px-4 mx-auto flex items-center justify-center transition-all duration-500">
Close
</button>
</div>
</div>
</div>Scrollable Bottom Drawer Example
A scrollable bottom drawer with overflow for long content like terms of service
<div class="relative w-full">
<div class="text-center">
<button
class="drawer-button py-2.5 px-4 text-sm rounded-md cursor-pointer font-semibold text-center border bg-white shadow-xs transition-all duration-500"
type="button" data-drawer-target="drawer-bottom3-example" data-drawer-show="drawer-bottom3-example"
data-drawer-position="bottom" aria-controls="drawer-bottom3-example">
View Terms
</button>
</div>
<!-- drawer component -->
<div id="drawer-bottom3-example"
class="fixed inset-x-0 bottom-0 z-40 max-h-[80vh] w-full px-4 pb-4 overflow-y-auto transition-transform translate-y-full bg-white shadow-lg border-t"
tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
<div class="bg-gray-100 mx-auto mt-2 h-2 w-20 rounded-full cursor-pointer"
data-drawer-hide="drawer-bottom3-example" aria-controls="drawer-bottom3-example" data-drawer-position="bottom">
</div>
<div class="flex flex-col gap-0.5 p-4">
<h3 class="font-medium text-base text-center">Drawer Title</h3>
<p class="text-neutral-500 text-sm text-center">This is a simple bottom drawer with header and footer.</p>
</div>
<div class="max-h-40 overflow-y-auto p-4 ">
<div class="space-y-4 text-sm">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident.</p>
</div>
</div>
</div>
</div>Bottom Drawer Event Details Example
A bottom drawer displaying rich event details with Badge tags,icons for date, location, and attendees in mobile sheet format
<div class="text-center">
<button
class="drawer-button py-2.5 px-4 border text-sm rounded-md cursor-pointer font-semibold text-center border bg-white shadow-xs transition-all duration-500"
type="button" data-drawer-target="drawer-bottom4-example" data-drawer-show="drawer-bottom4-example"
data-drawer-position="bottom" aria-controls="drawer-bottom4-example">
View Event
</button>
</div>
<!-- drawer component -->
<div id="drawer-bottom4-example"
class="fixed inset-x-0 bottom-0 z-40 max-h-[80vh] w-full px-4 pb-4 overflow-y-auto transition-transform translate-y-full bg-white shadow-lg border-t"
tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
<div class="bg-gray-100 mx-auto mt-2 h-2 w-20 rounded-full cursor-pointer">
</div>
<div class="flex flex-col gap-0.5 p-4">
<h3 class="font-medium text-base text-center">Design Workshop 2024</h3>
<p class="text-neutral-500 text-sm text-center">Join us for an immersive design workshop.</p>
</div>
<div class="space-y-4 py-4">
<div class="flex items-center gap-2"><span data-slot="badge"
class="inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap gap-1 bg-blue-500 text-white">Workshop</span><span
data-slot="badge"
class="inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap gap-1">In-Person</span>
</div>
<div class="flex flex-col gap-3">
<div class="flex items-center gap-3 text-sm"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-500"
aria-hidden="true">
<path d="M8 2v4"></path>
<path d="M16 2v4"></path>
<rect width="18" height="18" x="3" y="4" rx="2"></rect>
<path d="M3 10h18"></path>
</svg><span>March 15, 2024 at 2:00 PM</span></div>
<div class="flex items-center gap-3 text-sm"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-500"
aria-hidden="true">
<path
d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
</path>
<circle cx="12" cy="10" r="3"></circle>
</svg><span>123 Design Street, San Francisco</span></div>
<div class="flex items-center gap-3 text-sm"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-500"
aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg><span>24 people attending</span></div>
</div>
<div>
<h4 class="mb-2 font-medium text-sm">About this event</h4>
<p class="text-neutral-500 text-sm">Learn the latest design trends and techniques from industry
experts. This hands-on workshop covers everything from basics to advanced concepts.</p>
</div>
</div>
<div class="flex flex-col gap-2">
<button
class="rounded-md text-sm font-medium transition-all duration-500 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white w-full">Register
Now</button>
<button type="button" data-drawer-hide="drawer-bottom4-example" aria-controls="drawer-bottom4-example"
data-drawer-position="bottom"
class="black bg-transparent border hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-full font-medium py-2 px-4 mx-auto flex items-center justify-center transition-all duration-500">
Maybe Later
</button>
</div>
</div>Simple Left Drawer Example
Left drawer sliding from screen left with Menu icon trigger for navigation and sidebar content
<div class="text-center h-[800px]">
<button
class="drawer-button py-2.5 px-2.5 border text-xs text-white rounded-md cursor-pointer font-semibold text-center bg-white shadow-xs transition-all duration-500"
type="button" data-drawer-target="drawer-left1-example"
data-drawer-show="drawer-left1-example" data-drawer-position="left"
aria-controls="drawer-left1-example"> <svg width="24px" height="24px" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6H21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
<path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
<path d="M7 18H21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
</svg> </button>
</div>
<!-- drawer component -->
<div id="drawer-left1-example"
class="w-96 absolute left-0 top-0 z-40 px-4 pb-11 overflow-y-auto transition-transform -translate-x-full bg-white shadow-lg h-full border-r"
tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
<h2 id="drawer-label" class="text-gray-900 text-lg font-semibold leading-7 pt-4 pb-4">Menu </h2>
<p class="text-neutral-500 text-sm">This drawer slides in from the left side.</p>
<div class="py-4">
<p class="text-neutral-500 text-sm">Left-side drawers are commonly used for navigation menus
and
sidebars.</p>
</div>
<button type="button" data-drawer-hide="drawer-left1-example"
aria-controls="drawer-left1-example" data-drawer-position="left1"
class="w-80 py-2 px-4 hover:bg-gray-200 hover:text-gray-900 font-medium rounded-lg text-sm border shadow-xs absolute bottom-4 inline-flex items-center justify-center transition-all duration-500">
Close
</button>
</div>Left Drawer Navigation Menu Example
A Left drawer navigation menu with icon buttons for Home, Team, Projects, Settings, and Help
<div class="text-center h-[800px]">
<button
class="drawer-button py-2.5 px-2.5 border text-xs text-white rounded-md cursor-pointer font-semibold text-center bg-white shadow-xs transition-all duration-500"
type="button" data-drawer-target="drawer-left2-example"
data-drawer-show="drawer-left2-example" data-drawer-position="left"
aria-controls="drawer-left2-example"> <svg width="24px" height="24px" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6H21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
<path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
<path d="M7 18H21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
</svg> </button>
</div>
<!-- drawer component -->
<div id="drawer-left2-example"
class="w-96 absolute left-0 top-0 z-40 px-4 pb-11 overflow-y-auto transition-transform -translate-x-full bg-white shadow-lg h-full border-r"
tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
<h2 id="drawer-label" class="text-gray-900 text-lg font-semibold leading-7 pt-4 pb-4">Navigation
</h2>
<button type="button" data-drawer-hide="drawer-left2-example"
aria-controls="drawer-left2-example" data-drawer-position="left"
class="black bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-4 right-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close menu</span>
</button>
<nav class="flex flex-col gap-1"><button
class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 w-full justify-start duration-500 hover:bg-neutral-100"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class=" mr-3 h-4 w-4" aria-hidden="true">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
</path>
</svg>Home</button><button
class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 w-full justify-start duration-500 hover:bg-neutral-100"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class=" mr-3 h-4 w-4" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>Team</button><button
class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 w-full justify-start duration-500 hover:bg-neutral-100"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class=" mr-3 h-4 w-4" aria-hidden="true">
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M10 9H8"></path>
<path d="M16 13H8"></path>
<path d="M16 17H8"></path>
</svg>Projects</button><button
class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 w-full justify-start duration-500 hover:bg-neutral-100"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-settings mr-3 h-4 w-4" aria-hidden="true">
<path
d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915">
</path>
<circle cx="12" cy="12" r="3"></circle>
</svg>Settings</button><button
class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 w-full justify-start duration-500 hover:bg-neutral-100"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class=" mr-3 h-4 w-4" aria-hidden="true">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<path d="M12 17h.01"></path>
</svg>Help</button></nav>
</div>Left Drawer with Search Example
A left drawer with search Input at top and grouped navigation sections using uppercase headings and icons
<div class="text-center h-[800px]">
<button
class="drawer-button py-2.5 px-2.5 text-xs text-white rounded-md cursor-pointer font-semibold text-center border bg-white shadow-xs transition-all duration-500"
type="button" data-drawer-target="drawer-left3-example" data-drawer-show="drawer-left3-example"
data-drawer-position="left" aria-controls="drawer-left3-example"> <svg width="24px" height="24px"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6H21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M7 18H21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> </button>
</div>
<!-- drawer component -->
<div id="drawer-left3-example"
class="w-96 absolute left-0 top-0 z-40 px-4 pb-11 overflow-y-auto transition-transform -translate-x-full bg-white shadow-lg h-full border-r"
tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
<button type="button" data-drawer-hide="drawer-left3-example" aria-controls="drawer-left3-example"
data-drawer-position="left"
class="black border hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-80 font-medium py-2 px-4 absolute bottom-4 inline-flex items-center justify-center">
Close
</button>
<div class="relative pt-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="top-6 absolute left-3 h-6 w-4 text-muted-foreground" aria-hidden="true">
<path d="m21 21-4.34-4.34"></path>
<circle cx="11" cy="11" r="8"></circle>
</svg><input data-slot="input"
class="border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs pl-9"
placeholder="Search...">
</div>
<h3 class="mt-3 font-medium text-neutral-500 text-xs uppercase">Main Menu</h3>
<nav class="flex flex-col">
<button
class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 w-full justify-start duration-500 hover:bg-neutral-100"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class=" mr-3 h-4 w-4" aria-hidden="true">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
</path>
</svg>Home</button>
<button
class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 w-full justify-start duration-500 hover:bg-neutral-100"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class=" mr-3 h-4 w-4" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>Team</button>
<button
class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 w-full justify-start duration-500 hover:bg-neutral-100"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class=" mr-3 h-4 w-4" aria-hidden="true">
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M10 9H8"></path>
<path d="M16 13H8"></path>
<path d="M16 17H8"></path>
</svg>Projects</button>
</nav>
<h3 class="mt-3 font-medium text-neutral-500 text-xs uppercase">Setting</h3>
<nav class="flex flex-col">
<button
class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 w-full justify-start duration-500 hover:bg-neutral-100">
<svg class="w-4 h-4 text-gray-900" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5549 10.6412C20.3556 10.1761 20.6309 9.15209 20.1714 8.34816L19.3411 6.89536C18.8707 6.07218 17.8203 5.78887 16.9997 6.26383C15.8596 6.92371 14.4329 6.07159 14.4329 4.75429C14.4329 3.79494 13.6552 3 12.6958 3H11.0821C10.1459 3 9.38699 3.75891 9.38699 4.69507V4.81514C9.38699 6.06839 8.0289 6.85046 6.94495 6.22141C6.16637 5.76958 5.16886 6.03634 4.71974 6.81648L3.83811 8.34789C3.37563 9.15123 3.64979 10.1773 4.45133 10.6429C5.56596 11.2904 5.56353 12.9023 4.45117 13.5537C3.65059 14.0225 3.37509 15.0511 3.83797 15.8551L4.71974 17.3868C5.16886 18.167 6.16921 18.4321 6.94779 17.9802C8.0283 17.3532 9.38699 18.1299 9.38699 19.3792C9.38699 20.2744 10.1126 21 11.0078 21H12.7701C13.6884 21 14.4329 20.2556 14.4329 19.3373C14.4329 18.0565 15.82 17.2567 16.9285 17.8982L16.9997 17.9395C17.8203 18.4144 18.8707 18.1311 19.3411 17.3079L20.1716 15.8549C20.6314 15.0503 20.3548 14.0237 19.555 13.5554C18.4414 12.9032 18.439 11.2895 19.5549 10.6412Z"
stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
class="my-path">
</path>
<path
d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
stroke="currentColor" stroke-width="2" class="my-path"></path>
</svg>Preferences</button>
</nav>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More