Sidebar
Default Sidebar
html
typescript
<aside
flowbiteSidebar
class="relative! z-[0]! h-full!">
<div flowbiteSidebarContent>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="chartPie" />
Dashboard
</a>
</li>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="drawSquare" />
Kanban
</a>
</li>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="inbox" />
Inbox
</a>
</li>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="users" />
Users
</a>
</li>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="cart" />
Products
</a>
</li>
<li>
<a flowbiteSidebarItem>Sign In</a>
</li>
<li>
<a flowbiteSidebarItem>Sign Up</a>
</li>
</div>
</aside>
<div class="h-full w-full overflow-scroll">
<button flowbiteSidebarToggle>
<flowbite-icon
name="barsFromLeft"
class="size-10 stroke-2" />
</button>
<div class="p-4">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
@for (i of [0, 1]; track $index) {
<div class="mb-4 grid grid-cols-3 gap-4">
<div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
<div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
<div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
</div>
<div
class="mb-4 flex h-48 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
}
</div>
</div>
</div>Themes
Sidebar content
{
"host": {
"base": "h-full overflow-y-auto border-r px-3 py-4 lg:translate-x-0 lg:border-0",
"transition ": "",
"open": {
"on": "w-64 translate-x-0",
"off": "-translate-x-full"
},
"color": {
"default": {
"light": "border-gray-200 bg-gray-100",
"dark": "dark:border-gray-800 dark:bg-gray-900"
},
"info": {
"light": "border-blue-200 bg-gray-100",
"dark": "dark:border-blue-800 dark:bg-gray-900"
},
"failure": {
"light": "border-red-200 bg-gray-100",
"dark": "dark:border-red-800 dark:bg-gray-900"
},
"success": {
"light": "border-green-200 bg-gray-100",
"dark": "dark:border-green-800 dark:bg-gray-900"
},
"warning": {
"light": "border-yellow-200 bg-gray-100",
"dark": "dark:border-yellow-800 dark:bg-gray-900"
},
"primary": {
"light": "border-primary-200 bg-gray-100",
"dark": "dark:border-primary-800 dark:bg-gray-900"
}
}
},
"container": {
"base": "space-y-2 font-medium"
}
}Sidebar item
{
"host": {
"base": "m-0 flex cursor-pointer flex-row rounded-sm px-3 py-2",
"transition ": "",
"focus": "data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none",
"disabled": "data-disabled:cursor-not-allowed data-disabled:opacity-50",
"size": {},
"pill": {},
"color": {
"default": {
"light": "text-gray-800 data-hover:text-gray-900",
"dark": "dark:text-white dark:data-hover:text-gray-100"
},
"info": {
"light": "text-gray-800 data-hover:text-blue-900",
"dark": "dark:text-white dark:data-hover:text-blue-100"
},
"failure": {
"light": "text-gray-800 data-hover:text-red-900",
"dark": "dark:text-white dark:data-hover:text-red-100"
},
"success": {
"light": "text-gray-800 data-hover:text-green-900",
"dark": "dark:text-white dark:data-hover:text-green-100"
},
"warning": {
"light": "text-gray-800 data-hover:text-yellow-900",
"dark": "dark:text-white dark:data-hover:text-yellow-100"
},
"primary": {
"light": "data-hover:text-primary-900 text-gray-800",
"dark": "dark:data-hover:text-primary-100 dark:text-white"
}
},
"colorOutline": {}
}
}Sidebar
{
"host": {
"base": "fixed inset-0 top-0 left-0 z-40 h-screen lg:w-64",
"transition ": "",
"open": {
"on": "w-full backdrop-blur-sm",
"off": "w-0"
}
}
}Sidebar toggle
{
"host": {
"base": "inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-lg p-2 text-sm lg:hidden",
"transition ": "",
"focus": "data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none",
"disabled": "data-disabled:cursor-not-allowed data-disabled:opacity-50",
"size": {},
"pill": {},
"color": {
"default": {
"light": "text-gray-900",
"dark": "dark:text-gray-100"
},
"info": {
"light": "text-blue-900",
"dark": "dark:text-blue-100"
},
"failure": {
"light": "text-red-900",
"dark": "dark:text-red-100"
},
"success": {
"light": "text-green-900",
"dark": "dark:text-green-100"
},
"warning": {
"light": "text-yellow-900",
"dark": "dark:text-yellow-100"
},
"primary": {
"light": "text-primary-900",
"dark": "dark:text-primary-100"
}
},
"colorOutline": {}
}
}