Sidebar

Ripple UI comes with a sidebar component that can be used to display supplementary information or navigation options.

Default

Simple example of a Sidebar.

HTML
JSX
<aside class="sidebar h-full justify-start">
<section class="sidebar-title items-center p-4">
<svg fill="none" height="42" viewBox="0 0 32 32" width="42" xmlns="http://www.w3.org/2000/svg">
<rect height="100%" rx="16" width="100%"></rect>
<path clip-rule="evenodd" d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
<div class="flex flex-col">
<span>Acme</span>
<span class="text-xs font-normal text-content2">Team Plan</span>
</div>
</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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>General</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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span>Teams</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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
<span>Billing</span>
</li>
<li>
<input type="checkbox" id="menu-1" class="menu-toggle" />
<label class="menu-item justify-between" for="menu-1">
<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>Account</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-disabled menu-item ml-6">Accounts</label>
<label class="menu-item ml-6">Billing</label>
<label class="menu-item ml-6">Security</label>
<label class="menu-item ml-6">Notifications</label>
<label class="menu-item ml-6">Integrations</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="dropdown z-50 flex h-fit w-full cursor-pointer hover:bg-gray-4">
<label class="whites mx-2 flex h-fit w-full cursor-pointer p-0 hover:bg-gray-4" tabindex="0">
<div class="flex flex-row gap-4 p-4">
<div class="avatar avatar-md">
<img src="https://i.pravatar.cc/150?img=30" alt="avatar" />
</div>
<div class="flex flex-col">
<span>Sandra Marx</span>
<span class="text-xs font-normal text-content2">sandra</span>
</div>
</div>
</label>
<div class="dropdown-menu dropdown-menu-right-top ml-2">
<a class="dropdown-item text-sm">Profile</a>
<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
<a tabindex="-1" class="dropdown-item text-sm">Change email</a>
<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
<a tabindex="-1" class="dropdown-item text-sm">Change password</a>
<a tabindex="-1" class="dropdown-item text-sm">Refer a friend</a>
<a tabindex="-1" class="dropdown-item text-sm">Settings</a>
</div>
</div>
</section>
</aside>

Sticky Sidebar.

+
+
+
+
+
+
+
+
HTML
JSX
<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">
<svg fill="none" height="42" viewBox="0 0 32 32" width="42" xmlns="http://www.w3.org/2000/svg">
<rect height="100%" rx="16" width="100%"></rect>
<path clip-rule="evenodd" d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
<div class="flex flex-col">
<span>Acme</span>
<span class="text-xs font-normal text-content2">Team Plan</span>
</div>
</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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>General</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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span>Teams</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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
<span>Billing</span>
</li>
<li>
<input type="checkbox" id="menu-2" class="menu-toggle" />
<label class="menu-item justify-between" for="menu-2">
<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>Account</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">Accounts</label>
<label class="menu-item ml-6">Billing</label>
<label class="menu-item ml-6">Security</label>
<label class="menu-item ml-6">Notifications</label>
<label class="menu-item ml-6">Integrations</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="dropdown z-50 flex h-fit w-full cursor-pointer hover:bg-gray-4">
<label class="whites mx-2 flex h-fit w-full cursor-pointer p-0 hover:bg-gray-4" tabindex="0">
<div class="flex flex-row gap-4 p-4">
<div class="avatar avatar-md">
<img src="https://i.pravatar.cc/150?img=30" alt="avatar" />
</div>
<div class="flex flex-col">
<span>Sandra Marx</span>
<span class="text-xs font-normal text-content2">sandra</span>
</div>
</div>
</label>
<div class="dropdown-menu-right-top dropdown-menu ml-2">
<a class="dropdown-item text-sm">Profile</a>
<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
<a tabindex="-1" class="dropdown-item text-sm">Change email</a>
<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
<a tabindex="-1" class="dropdown-item text-sm">Change password</a>
<a tabindex="-1" class="dropdown-item text-sm">Refer a friend</a>
<a tabindex="-1" class="dropdown-item text-sm">Settings</a>
</div>
</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 Left

Left fixed sidebar.

HTML
JSX
<div class="flex flex-row gap-10">
<div class="w-full max-w-[18rem]">
<aside class="sidebar h-full sidebar-fixed-left justify-start">
<section class="sidebar-title items-center p-4">
<svg fill="none" height="42" viewBox="0 0 32 32" width="42" xmlns="http://www.w3.org/2000/svg">
<rect height="100%" rx="16" width="100%"></rect>
<path clip-rule="evenodd" d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
<div class="flex flex-col">
<span>Acme</span>
<span class="text-xs font-normal text-content2">Team Plan</span>
</div>
</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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>General</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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span>Teams</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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
<span>Billing</span>
</li>
<li>
<input type="checkbox" id="menu-1" class="menu-toggle" />
<label class="menu-item justify-between" for="menu-1">
<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>Account</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-disabled menu-item ml-6">Accounts</label>
<label class="menu-item ml-6">Billing</label>
<label class="menu-item ml-6">Security</label>
<label class="menu-item ml-6">Notifications</label>
<label class="menu-item ml-6">Integrations</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="dropdown z-50 flex h-fit w-full cursor-pointer hover:bg-gray-4">
<label class="whites mx-2 flex h-fit w-full cursor-pointer p-0 hover:bg-gray-4" tabindex="0">
<div class="flex flex-row gap-4 p-4">
<div class="avatar avatar-md">
<img src="https://i.pravatar.cc/150?img=30" alt="avatar" />
</div>
<div class="flex flex-col">
<span>Sandra Marx</span>
<span class="text-xs font-normal text-content2">sandra</span>
</div>
</div>
</label>
<div class="dropdown-menu dropdown-menu-right-top ml-2">
<a class="dropdown-item text-sm">Profile</a>
<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
<a tabindex="-1" class="dropdown-item text-sm">Change email</a>
<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
<a tabindex="-1" class="dropdown-item text-sm">Change password</a>
<a tabindex="-1" class="dropdown-item text-sm">Refer a friend</a>
<a tabindex="-1" class="dropdown-item text-sm">Settings</a>
</div>
</div>
</section>
</aside>
</div>
<div class="flex flex-col p-4 w-full">
<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>

You can have a sidebar that is fixed on the left or right side of the screen, and it will be visible on desktop and mobile.

HTML
JSX
<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-fixed-left sidebar-mobile h-full justify-start max-sm:fixed max-sm:-translate-x-full">
<section class="sidebar-title items-center p-4">
<svg fill="none" height="42" viewBox="0 0 32 32" width="42" xmlns="http://www.w3.org/2000/svg">
<rect height="100%" rx="16" width="100%"></rect>
<path clip-rule="evenodd" d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
<div class="flex flex-col">
<span>Acme</span>
<span class="text-xs font-normal text-content2">Team Plan</span>
</div>
</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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>General</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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span>Teams</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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
<span>Billing</span>
</li>
<li>
<input type="checkbox" id="menu-1" class="menu-toggle" />
<label class="menu-item justify-between" for="menu-1">
<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>Account</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">Change Email</label>
<label class="menu-item ml-6">Profile</label>
<label class="menu-item ml-6">Change Password</label>
</div>
</div>
</li>
</ul>
</section>
<div class="divider my-0"></div>
<section class="menu-section px-4">
<span class="menu-title">Settings</span>
<ul class="menu-items">
<li class="menu-item">
<svg xmlns="http://www.w3.org/2000/svg" class="opacity-75" width="22" height="22" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 21l18 0"></path>
<path d="M3 10l18 0"></path>
<path d="M5 6l7 -3l7 3"></path>
<path d="M4 10l0 11"></path>
<path d="M20 10l0 11"></path>
<path d="M8 14l0 3"></path>
<path d="M12 14l0 3"></path>
<path d="M16 14l0 3"></path>
</svg>
Payments
</li>
<li class="menu-item">
<svg xmlns="http://www.w3.org/2000/svg" class="opacity-75" width="22" height="22" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path>
<path d="M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
<path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2"></path>
</svg>
Balances
</li>
<li class="menu-item">
<svg xmlns="http://www.w3.org/2000/svg" class="opacity-75" width="22" height="22" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
<path d="M21 21v-2a4 4 0 0 0 -3 -3.85"></path>
</svg>
Customers
</li>
<li class="menu-item">
<svg xmlns="http://www.w3.org/2000/svg" class="opacity-75" width="22" height="22" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 10l5 -6l5 6"></path>
<path d="M21 10l-2 8a2 2.5 0 0 1 -2 2h-10a2 2.5 0 0 1 -2 -2l-2 -8z"></path>
<path d="M12 15m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
</svg>
Products
</li>
<li>
<input type="checkbox" id="menu-2" class="menu-toggle" />
<label class="menu-item justify-between" for="menu-2">
<div class="flex gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="opacity-75" width="22" height="22" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path>
<path d="M9 7l4 0"></path>
<path d="M9 11l4 0"></path>
</svg>
<span>Contracts</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">Create contract</label>
<label class="menu-item ml-6">All contracts</label>
<label class="menu-item ml-6">Pending contracts</label>
<label class="menu-item ml-6">Security</label>
</div>
</div>
</li>
</ul>
</section>
</nav>
</section>
<section class="sidebar-footer justify-end bg-gray-2 pt-2">
<div class="divider my-0"></div>
<div class="dropdown z-50 flex h-fit w-full cursor-pointer hover:bg-gray-4">
<label class="whites mx-2 flex h-fit w-full cursor-pointer p-0 hover:bg-gray-4" tabindex="0">
<div class="flex flex-row gap-4 p-4">
<div class="avatar-square avatar avatar-md">
<img src="https://i.pravatar.cc/150?img=30" alt="avatar" />
</div>
<div class="flex flex-col">
<span>Sandra Marx</span>
</div>
</div>
</label>
<div class="dropdown-menu-right-top dropdown-menu ml-2">
<a class="dropdown-item text-sm">Profile</a>
<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
<a tabindex="-1" class="dropdown-item text-sm">Change email</a>
<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
<a tabindex="-1" class="dropdown-item text-sm">Change password</a>
<a tabindex="-1" class="dropdown-item text-sm">Refer a friend</a>
<a tabindex="-1" class="dropdown-item text-sm">Settings</a>
</div>
</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>

API

classDescription
sidebarBase class for sidebar
sidebar-headerHeader section of sidebar
sidebar-footerFooter section of sidebar
sidebar-contentContent section of sidebar
sidebar-stickySticky sidebar
sidebar-fixed-leftThe sidebar will be fixed to the left
sidebar-fixed-rightThe sidebar will be fixed to the right
sidebar-mobilethe sidebar will add a transition
sidebar-stateclass to handle the sidebar state in checkbox
sidebar-overlaywhen the sidebar is open, it will add a overlay