Sidebar
Classes Information
| ClassName | Description |
|---|---|
| sidebar | Sidebar class |
| sidebar-header | Header section of the sidebar |
| sidebar-footer | Footer section of the sidebar |
| sidebar-content | Content section of the sidebar |
| sidebar-sticky | Sticky sidebar |
| sidebar-fixed-left | Sidebar fixed to the left side |
| sidebar-fixed-right | Sidebar fixed to the right side |
| sidebar-mobile | Sidebar with transition on mobile |
| sidebar-state | Class to handle the sidebar state in checkbox |
| sidebar-overlay | Overlay when the sidebar is open |
Basic Usage
Example Code
html
<aside class="sidebar h-full justify-start">
<section class="sidebar-title items-center p-4">Title Sidebar</section>
<section class="sidebar-content h-fit min-h-[20rem] overflow-visible">
<nav class="menu rounded-md">
<section class="menu-section px-4">
<span class="menu-title">Main menu</span>
<ul class="menu-items">
<li class="menu-item">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 1</span>
</li>
<li class="menu-item menu-active">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 2</span>
</li>
<li>
<input type="checkbox" id="menu-11" class="menu-toggle" />
<label class="menu-item justify-between" for="menu-11">
<div class="flex gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Parent Item</span>
</div>
<span class="menu-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</span>
</label>
<div class="menu-item-collapse">
<div class="min-h-0">
<label class="menu-item menu-item-disabled ml-6"
>Chiled Disable</label
>
<label class="menu-item ml-6">Child Item 1</label>
<label class="menu-item ml-6">Child Item 2</label>
</div>
</div>
</li>
</ul>
</section>
</nav>
</section>
<section class="sidebar-footer h-full justify-end bg-slate-3 pt-2">
<div class="divider my-0"></div>
<div class="p-5">Footer Sidebar</div>
</section>
</aside>Sticky Sidebar
Example Code
html
<div class="sticky flex h-screen flex-row gap-4 overflow-y-auto rounded-lg sm:overflow-x-hidden">
<aside class="sidebar-sticky sidebar justify-start">
<section class="sidebar-title items-center p-4">
Title Sidebar
</section>
<section class="sidebar-content min-h-[20rem]">
<nav class="menu rounded-md">
<section class="menu-section px-4">
<span class="menu-title">Main menu</span>
<ul class="menu-items">
<li class="menu-item">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 1</span>
</li>
<li class="menu-item menu-active">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 2</span>
</li>
<li>
<input type="checkbox" id="menu-11" class="menu-toggle" />
<label class="menu-item justify-between" for="menu-11">
<div class="flex gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Parent Item</span>
</div>
<span class="menu-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</span>
</label>
<div class="menu-item-collapse">
<div class="min-h-0">
<label class="menu-item menu-item-disabled ml-6"
>Chiled Disable</label
>
<label class="menu-item ml-6">Child Item 1</label>
<label class="menu-item ml-6">Child Item 2</label>
</div>
</div>
</li>
</ul>
</section>
</nav>
</section>
<section class="sidebar-footer bg-gray-2 pt-2">
<div class="divider my-0"></div>
<div class="p-5">Footer Sidebar</div>
</section>
</aside>
<div class="flex w-full flex-row flex-wrap gap-4 p-6">
<div class="my-4 grid w-full grid-cols-2 gap-4">
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
</div>
</div>
</div>Fixed
Example Code
html
<div class="grid grid-cols-12 gap-3">
<div class="col-span-6 max-w-[18rem] w-full">
<input
type="checkbox"
id="sidebar-mobile-fixed"
class="sidebar-state"
/>
<label for="sidebar-mobile-fixed" class="sidebar-overlay"></label>
<aside
class="sidebar h-full sidebar-fixed-left justify-start max-sm:fixed max-sm:-translate-x-full"
>
<section class="sidebar-title items-center p-4">
Title Sidebar
</section>
<section
class="sidebar-content h-fit min-h-[20rem] overflow-visible"
>
<nav class="menu rounded-md">
<section class="menu-section px-4">
<span class="menu-title">Main menu</span>
<ul class="menu-items">
<li class="menu-item">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 1</span>
</li>
<li class="menu-item menu-active">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 2</span>
</li>
<li>
<input type="checkbox" id="menu-11" class="menu-toggle" />
<label class="menu-item justify-between" for="menu-11">
<div class="flex gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Parent Item</span>
</div>
<span class="menu-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</span>
</label>
<div class="menu-item-collapse">
<div class="min-h-0">
<label class="menu-item menu-item-disabled ml-6"
>Chiled Disable</label
>
<label class="menu-item ml-6">Child Item 1</label>
<label class="menu-item ml-6">Child Item 2</label>
</div>
</div>
</li>
</ul>
</section>
</nav>
</section>
<section class="sidebar-footer h-full justify-end bg-gray-2 pt-2">
<div class="divider my-0"></div>
<div class="p-5">Footer Sidebar</div>
</section>
</aside>
</div>
<div class="flex flex-col p-4 sm:col-span-6 col-span-12">
<div class="w-fit">
<label for="sidebar-mobile-fixed" class="btn btn-primary sm:hidden"
>Open Sidebar</label
>
</div>
<div class="grid grid-cols-2 gap-4 my-4">
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
<div
class="h-40 w-full border-dashed border-2 border-border bg-gray-1 flex justify-center items-center"
>
+
</div>
</div>
</div>
</div>Responsive
Example Code
html
<div class="flex flex-row sm:gap-10">
<div class="sm:w-full sm:max-w-[18rem]">
<input
type="checkbox"
id="sidebar-mobile-fixed"
class="sidebar-state"
/>
<label for="sidebar-mobile-fixed" class="sidebar-overlay"></label>
<aside
class="sidebar sidebar-mobile h-full justify-start max-sm:fixed max-sm:-translate-x-full"
>
<section class="sidebar-title items-center p-4">
Title Sidebar
</section>
<section class="sidebar-content">
<nav class="menu rounded-md">
<section class="menu-section px-4">
<span class="menu-title">Main menu</span>
<ul class="menu-items">
<li class="menu-item">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 1</span>
</li>
<li class="menu-item menu-active">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 2</span>
</li>
<li>
<input type="checkbox" id="menu-11" class="menu-toggle" />
<label class="menu-item justify-between" for="menu-11">
<div class="flex gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Parent Item</span>
</div>
<span class="menu-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</span>
</label>
<div class="menu-item-collapse">
<div class="min-h-0">
<label class="menu-item menu-item-disabled ml-6"
>Chiled Disable</label
>
<label class="menu-item ml-6">Child Item 1</label>
<label class="menu-item ml-6">Child Item 2</label>
</div>
</div>
</li>
</ul>
</section>
<div class="divider my-0"></div>
<section class="menu-section px-4">
<span class="menu-title">Second Menu</span>
<ul class="menu-items">
<li class="menu-item">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 1</span>
</li>
<li class="menu-item">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 2</span>
</li>
<li class="menu-item">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-75"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>Item 3</span>
</li>
</ul>
</section>
</nav>
</section>
<section class="sidebar-footer justify-end pt-2">
<div class="divider my-0"></div>
<div class="p-5">Footer Sidebar</div>
</section>
</aside>
</div>
<div class="flex w-full flex-col p-4">
<div class="w-fit">
<label for="sidebar-mobile-fixed" class="btn-primary btn sm:hidden"
>Open Sidebar</label
>
</div>
<div class="my-4 grid grid-cols-2 gap-4">
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
<div
class="flex h-40 w-full items-center justify-center border-2 border-dashed border-border bg-gray-1"
>
+
</div>
</div>
</div>
</div>