6 Tailwind Sidebar Menus

<nav aria-label="Main" class="w-56 max-w-full rounded-2xl bg-white p-3 shadow-sm ring-1 ring-slate-200">
  <p class="px-3 text-xs font-bold uppercase tracking-wider text-slate-500">Workspace</p>
  <ul class="mt-2 grid gap-0.5 text-sm font-medium">
    <li><a href="#dash" aria-current="page" class="flex items-center gap-3 rounded-lg bg-indigo-50 px-3 py-2 text-indigo-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-5"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Dashboard</a></li>
    <li><a href="#projects" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-5"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>Projects</a></li>
    <li><a href="#calendar" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-5"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>Calendar</a></li>
    <li><a href="#reports" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-5"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg>Reports</a></li>
  </ul>
</nav>

<nav aria-label="Docs" class="w-56 max-w-full rounded-2xl bg-slate-900 p-3 text-sm">
  <div class="group" data-open>
    <button type="button" aria-expanded="true" class="flex w-full items-center justify-between rounded-lg px-3 py-2 font-semibold text-white hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300">Getting started<span aria-hidden="true" class="transition-transform group-data-[open]:rotate-90">›</span></button>
    <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 group-data-[open]:grid-rows-[1fr] motion-reduce:transition-none"><ul class="overflow-hidden pl-3"><li><a href="#install" class="block rounded-md px-3 py-1.5 text-slate-300 hover:text-white">Install</a></li><li><a href="#first" class="block rounded-md px-3 py-1.5 text-slate-300 hover:text-white">First project</a></li></ul></div>
  </div>
  <div class="group">
    <button type="button" aria-expanded="false" class="flex w-full items-center justify-between rounded-lg px-3 py-2 font-semibold text-white hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300">Guides<span aria-hidden="true" class="transition-transform group-data-[open]:rotate-90">›</span></button>
    <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 group-data-[open]:grid-rows-[1fr] motion-reduce:transition-none"><ul class="overflow-hidden pl-3"><li><a href="#themes" class="block rounded-md px-3 py-1.5 text-slate-300 hover:text-white">Themes</a></li><li><a href="#deploy" class="block rounded-md px-3 py-1.5 text-slate-300 hover:text-white">Deploy</a></li></ul></div>
  </div>
</nav>

document.querySelectorAll('[aria-label=Docs] .group').forEach(function (g) {
  var b = g.querySelector('button'), ul = g.querySelector('ul');
  function set(open) { b.setAttribute('aria-expanded', open); ul.inert = !open; if (open) g.dataset.open = ''; else delete g.dataset.open; }
  b.onclick = function () { set(b.getAttribute('aria-expanded') !== 'true'); };
  set('open' in g.dataset);
});

<nav aria-label="Mailboxes" class="w-56 max-w-full rounded-2xl bg-white p-3 shadow-sm ring-1 ring-slate-200">
  <ul class="grid gap-0.5 text-sm font-medium">
    <li><a href="#inbox" aria-current="page" class="flex items-center rounded-lg bg-slate-900 px-3 py-2 text-white">Inbox<span class="ml-auto rounded-full bg-white/20 px-2 text-xs">12<span class="sr-only"> unread</span></span></a></li>
    <li><a href="#starred" class="flex items-center rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Starred<span class="ml-auto rounded-full bg-slate-100 px-2 text-xs text-slate-700">3<span class="sr-only"> unread</span></span></a></li>
    <li><a href="#drafts" class="flex items-center rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Drafts</a></li>
    <li><a href="#rules" class="flex items-center rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Rules<span class="ml-auto rounded-full bg-emerald-100 px-2 text-xs font-semibold text-emerald-800">New</span></a></li>
  </ul>
</nav>

<aside class="flex h-72 w-56 max-w-full flex-col rounded-2xl bg-white p-3 shadow-sm ring-1 ring-slate-200">
  <nav aria-label="Main"><ul class="grid gap-0.5 text-sm font-medium"><li><a href="#home" aria-current="page" class="block rounded-lg bg-teal-50 px-3 py-2 text-teal-800">Home</a></li><li><a href="#orders" class="block rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Orders</a></li><li><a href="#customers" class="block rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">Customers</a></li></ul></nav>
  <div class="mt-auto flex items-center gap-3 border-t border-slate-200 pt-3">
    <span aria-hidden="true" class="grid size-9 shrink-0 place-items-center rounded-full bg-teal-700 text-xs font-bold text-white">JL</span>
    <div class="min-w-0 flex-1"><p class="truncate text-sm font-semibold text-slate-900">June Lee</p><p class="truncate text-xs text-slate-600">june.lee@example.com</p></div>
    <button type="button" aria-label="Sign out" class="grid size-8 place-items-center rounded-lg text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4"><path d="M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10"/></svg></button>
  </div>
</aside>

<nav aria-label="Main" class="flex w-16 flex-col items-center gap-2 rounded-2xl bg-slate-900 py-3 ring-1 ring-white/10">
  <a href="#home" aria-current="page" class="group relative grid size-11 place-items-center rounded-xl bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-300"><span aria-hidden="true">⌂</span><span class="sr-only">Home</span><span aria-hidden="true" class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-slate-700 px-2 py-1 text-xs font-semibold text-white opacity-0 shadow transition group-hover:opacity-100 group-focus-visible:opacity-100">Home</span></a>
  <a href="#inbox" class="group relative grid size-11 place-items-center rounded-xl text-slate-300 hover:bg-white/10 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-300"><span aria-hidden="true">✉</span><span class="sr-only">Inbox</span><span aria-hidden="true" class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-slate-700 px-2 py-1 text-xs font-semibold text-white opacity-0 shadow transition group-hover:opacity-100 group-focus-visible:opacity-100">Inbox</span></a>
  <a href="#stats" class="group relative grid size-11 place-items-center rounded-xl text-slate-300 hover:bg-white/10 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-300"><span aria-hidden="true">▤</span><span class="sr-only">Statistics</span><span aria-hidden="true" class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-slate-700 px-2 py-1 text-xs font-semibold text-white opacity-0 shadow transition group-hover:opacity-100 group-focus-visible:opacity-100">Statistics</span></a>
</nav>

<nav aria-label="Settings" class="w-56 max-w-full rounded-2xl bg-white p-3 shadow-sm ring-1 ring-slate-200">
  <input id="twsb6i" type="search" aria-label="Filter settings" placeholder="Filter settings" class="w-full rounded-lg border border-slate-300 px-3 py-1.5 text-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600">
  <p id="twsb6s" role="status" class="sr-only"></p>
  <ul id="twsb6l" class="mt-2 grid gap-0.5 text-sm text-slate-700"><li><a href="#account" class="block rounded-lg px-3 py-1.5 hover:bg-slate-100">Account</a></li><li><a href="#billing" class="block rounded-lg px-3 py-1.5 hover:bg-slate-100">Billing</a></li><li><a href="#domains" class="block rounded-lg px-3 py-1.5 hover:bg-slate-100">Domains</a></li><li><a href="#notifications" class="block rounded-lg px-3 py-1.5 hover:bg-slate-100">Notifications</a></li><li><a href="#security" class="block rounded-lg px-3 py-1.5 hover:bg-slate-100">Security</a></li><li><a href="#team" class="block rounded-lg px-3 py-1.5 hover:bg-slate-100">Team</a></li></ul>
  <p id="twsb6n" hidden class="px-3 py-2 text-sm text-slate-600">No matches</p>
</nav>

var i = document.getElementById('twsb6i'), items = document.querySelectorAll('#twsb6l li');
i.oninput = function () { var q = i.value.trim().toLowerCase(), n = 0; items.forEach(function (li) { var on = li.textContent.toLowerCase().indexOf(q) > -1; li.hidden = !on; if (on) n++; }); document.getElementById('twsb6n').hidden = n > 0; document.getElementById('twsb6s').textContent = q ? n + ' matching' : ''; };