navIntermediate
Sidebar Navigation
A vertical sidebar with grouped nav links and section labels.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a sidebar nav with Tailwind: fixed-width column with a brand block at the top, a search input, then sections of nav links (small uppercase section headers + items with icon + label). Active item gets a darker background. Footer at the bottom with user profile.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/side-menu/1.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-side-menu
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="max-w-xs w-full">
<div class="flex h-screen flex-col justify-between border-e border-gray-100 bg-white">
<div class="px-4 py-6">
<span
class="grid h-10 w-32 place-content-center rounded-lg bg-gray-100 text-xs text-gray-600"
>
Logo
</span>
<ul class="mt-6 space-y-1">
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
>
General
</a>
</li>
<li>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
<span class="text-sm font-medium"> Teams </span>
<span class="shrink-0 transition duration-300 group-open:-rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-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>
</summary>
<ul class="mt-2 space-y-1 px-4">
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
Banned Users
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
Calendar
</a>
</li>
</ul>
</details>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
Billing
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
Invoices
</a>
</li>
<li>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
<span class="text-sm font-medium"> Account </span>
<span class="shrink-0 transition duration-300 group-open:-rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-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>
</summary>
<ul class="mt-2 space-y-1 px-4">
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
Details
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
Security
</a>
</li>
<li>
<a
href="#"
class="w-full rounded-lg px-4 py-2 [text-align:_inherit] text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
Logout
</a>
</li>
</ul>
</details>
</li>
</ul>
</div>
<div class="sticky inset-x-0 bottom-0 border-t border-gray-100">
<a href="#" class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50">
<img
alt=""
src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?auto=format&fit=crop&q=80&w=1160"
class="size-10 rounded-full object-cover"
/>
<div>
<p class="text-xs">
<strong class="block font-medium">Eric Frusciante</strong>
<span> eric@frusciante.com </span>
</p>
</div>
</a>
</div>
</div>
</div>
</div>