Skip to main content

Sidebar

A fixed vertical sidebar with a user header and navigation links.

Preview​

HTML Snippet​

<aside
  class="w-64 h-screen min-h-full fixed flex flex-col shadow-sm bg-white border-r border-gray-100 dark:bg-neutral-900 dark:border-neutral-800">
  <div class="p-4 border-b border-gray-100 dark:border-neutral-800 overflow-visible flex-shrink-0">
    <div class="cursor-pointer">User Header</div>
  </div>

  <nav class="flex flex-col flex-1 px-3 py-4 space-y-1 min-h-0">
    <div class="flex-shrink-0">
      <div class="space-y-1">
        <a href="#"
        routerLinkActive="bg-gray-50 text-primary dark:bg-neutral-800"
        class="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800 dark:text-white">
          <svg class="w-5 h-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
          </svg>
          Item 1
        </a>

        <a href="#"
           routerLinkActive="bg-gray-50 text-primary dark:bg-neutral-800"
           class="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800 dark:text-white">
          <svg class="w-5 h-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
          </svg>
          Item 2
        </a>

        <a href="#"
           routerLinkActive="bg-gray-50 text-primary dark:bg-neutral-800"
           class="flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800 dark:text-white">
          <svg class="w-5 h-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
          </svg>
          Item 3
        </a>
      </div>
    </div>
  </nav>
</aside>

Notes​

  • The sidebar is fixed to the left and takes up the full screen height (h-screen).
  • Replace the placeholder "User Header" with a real user profile component (e.g., avatar, name, status).
  • Navigation items are styled as links with hover states; update the <a> tags with actual href attributes or router links.
  • Use flex-1 on the <nav> so the navigation grows and scrolls if needed.
  • Apply dark: variants to ensure proper theming in dark mode.