Tailwind CSS Sidebars Collection

Explore various sidebar styles crafted with Tailwind CSS. These components provide flexible navigation and layout options for your web applications.

Each example includes a live preview and the corresponding HTML code. Click the "HTML" tab to view the code and use the "Copy" button to grab it for your project. Note that some sidebars might require minimal JavaScript for full interactivity (like collapsing or sliding).

Fixed Sidebar (Vertical Navigation)

Main Content Area
(Add margin/padding to avoid overlap with the real fixed sidebar)

<!-- Fixed Sidebar - Place this outside your main content container -->
<!-- Add margin-left (e.g., ml-64) to your main content container to prevent overlap -->
<div class="fixed top-0 left-0 h-screen w-64 bg-white shadow-lg border-r border-gray-200 flex flex-col z-40">
  <!-- Logo Area -->
  <div class="p-4 border-b border-gray-200">
    <span class="text-blue-600 font-bold text-xl">WPDean</span>
  </div>

  <!-- Navigation Links -->
  <nav class="flex-grow p-4 space-y-2 overflow-y-auto">
    <a href="#" class="flex items-center space-x-2 px-3 py-2 bg-blue-100 text-blue-700 rounded-md text-sm font-medium">
      <!-- Heroicon: Home -->
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
      <span>Dashboard</span>
    </a>
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <!-- Heroicon: Users -->
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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.197M15 21v-1a6 6 0 00-5.173-5.906M9 15v-1a6 6 0 016-6v1a6 6 0 01-6 6z"></path></svg>
      <span>Team</span>
    </a>
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <!-- Heroicon: Folder -->
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
      <span>Projects</span>
    </a>
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <!-- Heroicon: Calendar -->
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
      <span>Calendar</span>
    </a>
  </nav>

  <!-- Footer Area (Optional) -->
  <div class="p-4 border-t border-gray-200">
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <!-- Heroicon: Cog -->
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
      <span>Settings</span>
    </a>
  </div>
</div>

Collapsible Sidebar

Main Content Area
(Adjust margin based on sidebar state w/ JS)

<!-- Collapsible Sidebar - Requires JavaScript to toggle width and content visibility -->
<!-- Add JS to toggle between 'w-64' and 'w-20' (or desired collapsed width) -->
<!-- Also toggle margin on the main content container (e.g., ml-64 / ml-20) -->
<!-- The 'is-collapsed' class is a placeholder for your JS state management -->

<div id="collapsible-sidebar" class="fixed top-0 left-0 h-screen bg-white shadow-lg border-r border-gray-200 flex flex-col z-40 transition-all duration-300 ease-in-out w-64">
  <!-- Add 'w-20' class above when collapsed -->

  <!-- Header with Toggle Button -->
  <div class="p-4 border-b border-gray-200 flex items-center justify-between">
    <!-- Logo - Text hides via overflow/whitespace when collapsed -->
    <span class="text-blue-600 font-bold text-xl whitespace-nowrap overflow-hidden">WPDean</span>
    <button id="sidebar-toggle-button" class="text-gray-500 hover:text-gray-700">
      <!-- Toggle Icon (Example: Chevron Left/Right based on state) -->
      <!-- JS should change this icon -->
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg> <!-- Collapsed: M4 6h16M4 12h16m-7 6h7 -->
    </button>
  </div>

  <!-- Navigation Links - Text hides via overflow/whitespace when collapsed -->
  <nav class="flex-grow p-4 space-y-2 overflow-y-auto overflow-x-hidden">
    <a href="#" class="flex items-center space-x-2 px-3 py-2 bg-blue-100 text-blue-700 rounded-md text-sm font-medium">
      <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
      <span class="whitespace-nowrap overflow-hidden">Dashboard</span>
    </a>
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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.197M15 21v-1a6 6 0 00-5.173-5.906M9 15v-1a6 6 0 016-6v1a6 6 0 01-6 6z"></path></svg>
      <span class="whitespace-nowrap overflow-hidden">Team</span>
    </a>
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
      <span class="whitespace-nowrap overflow-hidden">Projects</span>
    </a>
  </nav>

  <!-- Footer Area (Optional) -->
  <div class="p-4 border-t border-gray-200">
     <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
        <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span class="whitespace-nowrap overflow-hidden">Settings</span>
    </a>
  </div>
</div>

<!-- Example JavaScript (Conceptual - adapt to your framework/needs) -->
<!--
const sidebar = document.getElementById('collapsible-sidebar');
const toggleButton = document.getElementById('sidebar-toggle-button');
const mainContent = document.getElementById('main-content'); // Assume your content has this ID

let isCollapsed = false;

toggleButton.addEventListener('click', () => {
  isCollapsed = !isCollapsed;
  if (isCollapsed) {
    sidebar.classList.remove('w-64');
    sidebar.classList.add('w-20');
    mainContent.classList.remove('ml-64'); // Adjust margin/padding as needed
    mainContent.classList.add('ml-20');
    // Change toggle icon to "expand" icon
  } else {
    sidebar.classList.remove('w-20');
    sidebar.classList.add('w-64');
    mainContent.classList.remove('ml-20');
    mainContent.classList.add('ml-64');
    // Change toggle icon to "collapse" icon
  }
});
-->

Expandable/Accordion Sidebar

Main Content Area
(Uses HTML details/summary for accordion)

<!-- Expandable/Accordion Sidebar -->
<!-- Uses the HTML <details> and <summary> elements for simple, CSS-only accordion behavior. -->
<!-- For more complex animations or state management, JavaScript might be needed. -->
<!-- Place this sidebar structure appropriately in your layout (e.g., fixed position like other examples). -->
<!-- Remember to adjust main content margin/padding if using fixed positioning. -->

<div class="fixed top-0 left-0 h-screen w-64 bg-white shadow-lg border-r border-gray-200 flex flex-col z-40">
  <!-- Logo Area -->
  <div class="p-4 border-b border-gray-200">
    <span class="text-blue-600 font-bold text-xl">WPDean</span>
  </div>

  <!-- Navigation with Accordion -->
  <nav class="flex-grow p-4 space-y-1 overflow-y-auto">
    <!-- Standard Link -->
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
      <span>Dashboard</span>
    </a>

    <!-- Accordion Item 1 -->
    <details class="group">
      <summary class="flex items-center justify-between px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium cursor-pointer list-none">
        <!-- Remove default arrow/marker if desired with list-none -->
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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.197M15 21v-1a6 6 0 00-5.173-5.906M9 15v-1a6 6 0 016-6v1a6 6 0 01-6 6z"></path></svg>
          <span>Team</span>
        </div>
        <!-- Custom Arrow (rotates when details[open]) -->
        <svg class="w-4 h-4 text-gray-400 group-open:rotate-90 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </summary>
      <!-- Submenu -->
      <div class="mt-1 pl-8 space-y-1"> <!-- Indent submenu items -->
        <a href="#" class="block px-3 py-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm">Members</a>
        <a href="#" class="block px-3 py-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm">Roles</a>
        <a href="#" class="block px-3 py-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm">Invitations</a>
      </div>
    </details>

    <!-- Accordion Item 2 -->
     <details class="group">
      <summary class="flex items-center justify-between px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium cursor-pointer list-none">
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
          <span>Projects</span>
        </div>
        <svg class="w-4 h-4 text-gray-400 group-open:rotate-90 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </summary>
      <div class="mt-1 pl-8 space-y-1">
        <a href="#" class="block px-3 py-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm">Active</a>
        <a href="#" class="block px-3 py-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm">Archived</a>
      </div>
    </details>

    <!-- Another Standard Link -->
     <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span>Calendar</span>
     </a>
  </nav>

  <!-- Footer Area (Optional) -->
  <div class="p-4 border-t border-gray-200">
     <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span>Settings</span>
    </a>
  </div>
</div>

Hoverable Sidebar (Expands on hover)

Main Content Area
(Hover over the sidebar to expand.
Adjust margin based on hover state w/ JS or CSS)

<!-- Hoverable Sidebar - Expands purely with CSS using group-hover -->
<!-- Place this sidebar structure appropriately (e.g., fixed position). -->
<!-- Adjust main content margin/padding if needed. This can be trickier without JS, -->
<!-- potentially requiring the main content to also react to the sidebar hover. -->

<div class="group fixed top-0 left-0 h-screen bg-white shadow-lg border-r border-gray-200 flex flex-col z-40 transition-all duration-300 ease-in-out w-20 hover:w-64 overflow-hidden">
  <!-- Header Area -->
  <div class="p-4 border-b border-gray-200 flex items-center justify-center group-hover:justify-start">
    
    <!-- Text visible only on hover (expanded) - uses opacity and delay for smoother reveal -->
    <span class="text-blue-600 font-bold text-xl ml-2 whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out delay-150">WPDean</span>
  </div>

  <!-- Navigation Links -->
  <nav class="flex-grow p-4 space-y-2 overflow-y-auto overflow-x-hidden">
    <a href="#" class="flex items-center space-x-2 px-3 py-2 bg-gray-100 text-gray-900 rounded-md text-sm font-medium group-hover:bg-blue-100 group-hover:text-blue-700"> <!-- Example active state styling changes on hover -->
      <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
      <span class="whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out delay-150">Dashboard</span>
    </a>
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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.197M15 21v-1a6 6 0 00-5.173-5.906M9 15v-1a6 6 0 016-6v1a6 6 0 01-6 6z"></path></svg>
      <span class="whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out delay-150">Team</span>
    </a>
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
      <span class="whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out delay-150">Projects</span>
    </a>
  </nav>

  <!-- Footer Area (Optional) -->
  <div class="p-4 border-t border-gray-200">
    <a href="#" class="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-md text-sm font-medium">
      <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
      <span class="whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out delay-150">Settings</span>
    </a>
  </div>
</div>

Mini / Icon-Only Sidebar

Main Content Area
(Use tooltips for icon meaning.
Adjust main content margin)

<!-- Mini / Icon-Only Sidebar -->
<!-- Often used as the collapsed state of a collapsible sidebar. -->
<!-- Tooltips (not included here) are recommended for icon accessibility. -->
<!-- Place this fixed sidebar and adjust main content margin (e.g., ml-20). -->

<div class="fixed top-0 left-0 h-screen w-20 bg-white shadow-lg border-r border-gray-200 flex flex-col items-center py-4 z-40">
  <!-- Logo Icon Area -->
  <div class="mb-6">
    <!-- Replace with your actual logo icon -->
     <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a4 4 0 01-1.018 4.848 4 4 0 01-5.133.06C11.313 18.95 8.687 18.95 6.723 20.336a4 4 0 01-5.133-.06 4 4 0 01-1.018-4.848c1.386-1.964 1.386-4.59 0-6.554a4 4 0 011.018-4.848 4 4 0 015.133-.06C8.687 5.05 11.313 5.05 13.277 3.664a4 4 0 015.133.06 4 4 0 011.018 4.848c-1.386 1.964-1.386 4.59 0 6.554z"></path></svg>
  </div>

  <!-- Navigation Icons -->
  <nav class="flex flex-col items-center space-y-4 flex-grow">
    <a href="#" title="Dashboard" class="p-2 rounded-md bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
    </a>
    <a href="#" title="Team" class="p-2 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-colors">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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.197M15 21v-1a6 6 0 00-5.173-5.906M9 15v-1a6 6 0 016-6v1a6 6 0 01-6 6z"></path></svg>
    </a>
    <a href="#" title="Projects" class="p-2 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-colors">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
    </a>
    <a href="#" title="Calendar" class="p-2 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-colors">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
    </a>
  </nav>

  <!-- Footer Icon Area (Optional) -->
  <div class="mt-6">
    <a href="#" title="Settings" class="p-2 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-colors">
       <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
    </a>
  </div>
</div>

FAQ on Tailwind CSS Sidebars

How do I create a responsive sidebar with Tailwind CSS?

Create responsive sidebars by combining Tailwind's utility-first CSS approach with responsive breakpoints. Start with a basic sidebar structure, then apply width classes that change at different screen sizes. Use Flexbox sidebar layout with responsive utilities to control visibility across devices in your frontend development.

What's the best way to implement a collapsible sidebar?

Combine Tailwind CSS with a touch of JavaScript or Alpine.js for collapsible sidebars. Create a toggle button that controls the sidebar's width or visibility state. This pattern works well in dashboard layouts and admin panels with custom sidebar design and sidebar animation.

How can I style a fixed sidebar that doesn't scroll?

Apply Tailwind's fixed sidebar position utilities with height configuration to create non-scrolling sidebars. Remember to add appropriate padding to your main content to prevent overlap. This approach works with both light and dark mode sidebar implementations for effective UI/UX design.

Can I create a sticky sidebar with Tailwind?

Yes. Use Tailwind's sticky sidebar positioning and top-0 utilities. This creates a sidebar that sticks to its position during scrolling. Combine with overflow handling for longer sidebar content and proper sidebar scrolling behavior in your web design projects.

How do I add hover effects to sidebar navigation items?

Apply hover: utilities to sidebar navigation elements. This approach works for all types of side navigation components. Enhance with transition effects for smoother interactions and active state styling for selected items in your navigation menus.

What's the best way to handle sidebar height constraints?

Control sidebar height using Tailwind's height utilities. The h-screen sets full height, while overflow-y-auto enables scrolling when content exceeds the viewport. This works well with nested sidebar menus and prevents layout issues in UI components for responsive web design.

How do I implement a mobile sidebar drawer with Tailwind?

Create a drawer component using transform and translate utilities with transitions. Toggle the translate class with JavaScript or Alpine.js. Add z-index management to ensure proper layering in your HTML sidebar structure for an effective mobile sidebar implementation.

How can I add icons to my Tailwind sidebar navigation?

Incorporate icons by combining Tailwind CSS with icon libraries like Heroicons. This approach creates consistent spacing and alignment in navigation menus. Use icon integration with text styling for balanced visual hierarchy in your sidebar components.

How do I customize Tailwind for project-specific sidebar styles?

Extend Tailwind's config file to include custom sidebar styling. Use these custom utilities throughout your project. This works well with the JIT compiler for optimal performance and allows sidebar customization to match your design system needs in frontend frameworks.

How do I build accessible sidebars with Tailwind CSS?

Focus on sidebar accessibility by adding appropriate ARIA attributes and focus states. Use semantic HTML elements for your sidebar navigation patterns. Test with keyboard navigation and screen readers to ensure all users can interact with your sidebar components from Tailwind UI.