Summarize this article with:
A sidebar can make or break your web app’s user experience.
Get it right and users flow through your content effortlessly. Get it wrong and they bounce.
Tailwind sidebar examples give you production-ready code for dashboard layouts, admin panels, and documentation sites without writing custom stylesheets from scratch.
This guide covers six complete sidebar patterns you can copy directly into your projects.
You’ll learn the differences between collapsible, fixed, responsive, and off-canvas sidebars. Each example includes the full markup, explains which utility classes matter most, and shows you how to customize colors, spacing, and hover states.
Let’s build something.
What is a Tailwind Sidebar
A Tailwind sidebar is a vertical navigation component built with utility-first CSS classes.
It organizes links, menus, and content sections along the left or right edge of web applications.
Unlike traditional CSS approaches where you write custom stylesheets, Tailwind CSS lets you compose sidebar layouts directly in your HTML markup.
Dashboard admin panels, documentation sites, and e-commerce category pages all rely on sidebar navigation templates.
The component typically includes navigation links, nested menu items, icons, and sometimes a toggle button for collapsing on smaller screens.
Tailwind Sidebar Examples
Tailwind CSS Collection
Card Sidebar Navigation – Tailwind Sidebars
Tailwind Sidebar Layout
Tailwind CSS Sidenav / Sidebar
Tailwind CSS Simple Sidebar UI Example
Tailwind CSSS Responsive Sidebar by Ahmed Kamel
Kisstheme
Responsive navbar with dark mode support
Tailwind CSS Sidebar – Flowbite
Tailwind CSS Sidebar Components
Responsive Sidebar With Dropdown
Sticky left sidebar
Responsive Sidebar Navigation with Tailwind by Robert Kummer
Sidebar Layout – TUK
Sidebar For Dashboards
Simple responsive blog layout with sidebar
Collapsible Sidebar with Tailwind CSS & Alpine.js by Azri Kahar
Tailwind CSS Sidebar – React
Sidebar-vue-tailwind by Berk Akgün
Sticky sidebar menu for big screens
Navbar with Sidebar Navigation- Tailwind Component
Sidebar Purple By MateoM147
Blog post template with responsive sidebar
How Does a Tailwind Sidebar Work
Tailwind sidebars use flex containers and fixed positioning to stay anchored while the main content scrolls.
The basic structure combines a wrapper div with utility classes like flex, h-screen, and w-64.
Here’s how the pieces fit together:
- Flex container separates the sidebar from main content area
- Fixed or sticky positioning keeps the sidebar visible during scroll
- Width classes like w-64 or w-72 control the sidebar panel size
- Background utilities handle colors, gradients, and dark mode toggle states
- Overflow-y-auto enables scrolling for long navigation lists
Responsive breakpoint classes hide or transform the sidebar on mobile devices.
You might use hidden md:flex to show the sidebar only on medium screens and larger.
On smaller viewports, a hamburger icon typically triggers an off-canvas drawer instead.
Types of Tailwind Sidebars
Different layouts serve different purposes. Pick the type that matches your project needs.
What is a Collapsible Tailwind Sidebar
A collapsible sidebar shrinks to show only icons when toggled, then expands to reveal full labels.
Uses JavaScript or Alpine.js to toggle width classes between w-16 and w-64.
Common in admin panels where screen space matters.
What is a Fixed Tailwind Sidebar
Fixed sidebars stay locked in place using fixed left-0 top-0 h-screen.
Content scrolls independently while the navigation remains visible. Perfect for documentation sites.
What is a Responsive Tailwind Sidebar
Responsive sidebars adapt across screen sizes using media queries built into Tailwind’s breakpoint prefixes.
Desktop shows full sidebar. Tablet might collapse to icons. Mobile hides it completely behind a menu button.
This mobile-first approach ensures the sidebar UI component works everywhere.
What is an Off-Canvas Tailwind Sidebar
Off-canvas sidebars slide in from the edge when triggered, overlaying the main content.
Built with transform and transition utilities: -translate-x-full hides it, translate-x-0 reveals it.
Add a backdrop blur overlay for that modern drawer component feel.
Tailwind Sidebar Examples
These code examples cover the most common sidebar patterns. Each one is production-ready.
Example: Dashboard Admin Sidebar
The classic admin dashboard layout with logo, nav links, and user profile at the bottom.
“ <aside class="flex flex-col w-64 h-screen bg-gray-900 text-white"> <div class="p-4 border-b border-gray-700"> <span class="text-xl font-bold">Dashboard</span> </div> <nav class="flex-1 p-4 space-y-2"> <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg bg-gray-800"> <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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> Home </a> <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-gray-800"> <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> Analytics </a> <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-gray-800"> <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.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> Users </a> <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-gray-800"> <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> Settings </a> </nav> <div class="p-4 border-t border-gray-700"> <div class="flex items-center gap-3"> <img src="/avatar.jpg" alt="User" class="w-10 h-10 rounded-full"> <div> <p class="font-medium">John Doe</p> <p class="text-sm text-gray-400">Admin</p> </div> </div> </div> </aside> `
The space-y-2 class adds consistent vertical spacing between links. Heroicons provide the SVG icons.
Example: E-commerce Category Sidebar
Filter-style sidebar for product listings with expandable category sections.
` <aside class="w-64 p-6 bg-white border-r"> <h2 class="text-lg font-semibold mb-4">Categories</h2> <ul class="space-y-3"> <li> <button class="flex items-center justify-between w-full text-left"> <span>Electronics</span> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <ul class="mt-2 ml-4 space-y-2 text-sm text-gray-600"> <li><a href="#" class="hover:text-gray-900">Phones</a></li> <li><a href="#" class="hover:text-gray-900">Laptops</a></li> <li><a href="#" class="hover:text-gray-900">Tablets</a></li> </ul> </li> <li> <a href="#" class="hover:text-gray-900">Clothing</a> </li> <li> <a href="#" class="hover:text-gray-900">Home & Garden</a> </li> </ul>
<h2 class=”text-lg font-semibold mt-8 mb-4″>Price Range</h2> <div class=”space-y-2″> <label class=”flex items-center gap-2″> <input type=”checkbox” class=”rounded”> <span class=”text-sm”>Under $50</span> </label> <label class=”flex items-center gap-2″> <input type=”checkbox” class=”rounded”> <span class=”text-sm”>$50 – $100</span> </label> <label class=”flex items-center gap-2″> <input type=”checkbox” class=”rounded”> <span class=”text-sm”>$100+</span> </label> </div> </aside> `
Accordion menu behavior needs Alpine.js or vanilla JS to toggle visibility of nested menu items.
Example: Documentation Sidebar with Nested Links
Sticky sidebar navigation pattern used by Tailwind’s own docs and similar technical sites.
` <aside class="sticky top-0 w-64 h-screen overflow-y-auto p-6 bg-gray-50"> <nav class="space-y-6"> <div> <h3 class="font-semibold text-gray-900 mb-2">Getting Started</h3> <ul class="space-y-1 text-sm"> <li><a href="#" class="block py-1 text-blue-600">Installation</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Configuration</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">First Steps</a></li> </ul> </div> <div> <h3 class="font-semibold text-gray-900 mb-2">Core Concepts</h3> <ul class="space-y-1 text-sm"> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Utility Classes</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Responsive Design</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Dark Mode</a></li> </ul> </div> <div> <h3 class="font-semibold text-gray-900 mb-2">Components</h3> <ul class="space-y-1 text-sm"> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Buttons</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Forms</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Navigation</a></li> </ul> </div> </nav> </aside> `
The sticky top-0 combo keeps it visible during scrolling. Add scrollbar-thin for custom scrollbar styling if using the plugin.
Example: Dark Mode Sidebar
Modern dark sidebar design with gradient accents and smooth hover effects.
` <aside class="w-72 h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-gray-100"> <div class="p-6"> <div class="flex items-center gap-3 mb-8"> <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center"> <span class="text-xl font-bold">A</span> </div> <span class="text-xl font-semibold">Acme Inc</span> </div> <nav class="space-y-1"> <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl bg-white/10 text-white"> <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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path> </svg> Dashboard </a> <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-400 hover:bg-white/5 hover:text-white transition-colors"> <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> Projects </a> <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-400 hover:bg-white/5 hover:text-white transition-colors"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin `
What is a Tailwind Sidebar
A Tailwind sidebar is a vertical navigation component built with utility-first CSS classes.
It organizes links, menus, and content sections along the left or right edge of web applications.
Unlike traditional CSS approaches where you write custom stylesheets, Tailwind CSS lets you compose sidebar layouts directly in your HTML markup.
Dashboard admin panels, documentation sites, and e-commerce category pages all rely on sidebar navigation templates.
The component typically includes navigation links, nested menu items, icons, and sometimes a toggle button for collapsing on smaller screens.
How Does a Tailwind Sidebar Work
Tailwind sidebars use flex containers and fixed positioning to stay anchored while the main content scrolls.
The basic structure combines a wrapper div with utility classes like flex, h-screen, and w-64.
Here’s how the pieces fit together:
- Flex container separates the sidebar from main content area
- Fixed or sticky positioning keeps the sidebar visible during scroll
- Width classes like w-64 or w-72 control the sidebar panel size
- Background utilities handle colors, gradients, and dark mode toggle states
- Overflow-y-auto enables scrolling for long navigation lists
Responsive breakpoint classes hide or transform the sidebar on mobile devices.
You might use hidden md:flex to show the sidebar only on medium screens and larger.
On smaller viewports, a hamburger icon typically triggers an off-canvas drawer instead.
Types of Tailwind Sidebars
Different layouts serve different purposes. Pick the type that matches your project needs.
What is a Collapsible Tailwind Sidebar
A collapsible sidebar shrinks to show only icons when toggled, then expands to reveal full labels.
Uses JavaScript or Alpine.js to toggle width classes between w-16 and w-64.
Common in admin panels where screen space matters.
What is a Fixed Tailwind Sidebar
Fixed sidebars stay locked in place using fixed left-0 top-0 h-screen.
Content scrolls independently while the navigation remains visible. Perfect for documentation sites.
What is a Responsive Tailwind Sidebar
Responsive sidebars adapt across screen sizes using media queries built into Tailwind’s breakpoint prefixes.
Desktop shows full sidebar. Tablet might collapse to icons. Mobile hides it completely behind a menu button.
This mobile-first approach ensures the sidebar UI component works everywhere.
What is an Off-Canvas Tailwind Sidebar
Off-canvas sidebars slide in from the edge when triggered, overlaying the main content.
Built with transform and transition utilities: -translate-x-full hides it, translate-x-0 reveals it.
Add a backdrop blur overlay for that modern drawer component feel.
Tailwind Sidebar Examples
These code examples cover the most common sidebar patterns. Each one is production-ready.
Example: Dashboard Admin Sidebar
The classic admin dashboard layout with logo, nav links, and user profile at the bottom.
` <aside class="flex flex-col w-64 h-screen bg-gray-900 text-white"> <div class="p-4 border-b border-gray-700"> <span class="text-xl font-bold">Dashboard</span> </div> <nav class="flex-1 p-4 space-y-2"> <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg bg-gray-800"> <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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> Home </a> <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-gray-800"> <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> Analytics </a> <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-gray-800"> <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.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> Users </a> <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-gray-800"> <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> Settings </a> </nav> <div class="p-4 border-t border-gray-700"> <div class="flex items-center gap-3"> <img src="/avatar.jpg" alt="User" class="w-10 h-10 rounded-full"> <div> <p class="font-medium">John Doe</p> <p class="text-sm text-gray-400">Admin</p> </div> </div> </div> </aside> `
The space-y-2 class adds consistent vertical spacing between links. Heroicons provide the SVG icons.
Example: E-commerce Category Sidebar
Filter-style sidebar for product listings with expandable category sections.
` <aside class="w-64 p-6 bg-white border-r"> <h2 class="text-lg font-semibold mb-4">Categories</h2> <ul class="space-y-3"> <li> <button class="flex items-center justify-between w-full text-left"> <span>Electronics</span> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <ul class="mt-2 ml-4 space-y-2 text-sm text-gray-600"> <li><a href="#" class="hover:text-gray-900">Phones</a></li> <li><a href="#" class="hover:text-gray-900">Laptops</a></li> <li><a href="#" class="hover:text-gray-900">Tablets</a></li> </ul> </li> <li> <a href="#" class="hover:text-gray-900">Clothing</a> </li> <li> <a href="#" class="hover:text-gray-900">Home & Garden</a> </li> </ul>
<h2 class=”text-lg font-semibold mt-8 mb-4″>Price Range</h2> <div class=”space-y-2″> <label class=”flex items-center gap-2″> <input type=”checkbox” class=”rounded”> <span class=”text-sm”>Under $50</span> </label> <label class=”flex items-center gap-2″> <input type=”checkbox” class=”rounded”> <span class=”text-sm”>$50 – $100</span> </label> <label class=”flex items-center gap-2″> <input type=”checkbox” class=”rounded”> <span class=”text-sm”>$100+</span> </label> </div> </aside> `
Accordion menu behavior needs Alpine.js or vanilla JS to toggle visibility of nested menu items.
Example: Documentation Sidebar with Nested Links
Sticky sidebar navigation pattern used by Tailwind’s own docs and similar technical sites.
` <aside class="sticky top-0 w-64 h-screen overflow-y-auto p-6 bg-gray-50"> <nav class="space-y-6"> <div> <h3 class="font-semibold text-gray-900 mb-2">Getting Started</h3> <ul class="space-y-1 text-sm"> <li><a href="#" class="block py-1 text-blue-600">Installation</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Configuration</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">First Steps</a></li> </ul> </div> <div> <h3 class="font-semibold text-gray-900 mb-2">Core Concepts</h3> <ul class="space-y-1 text-sm"> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Utility Classes</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Responsive Design</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Dark Mode</a></li> </ul> </div> <div> <h3 class="font-semibold text-gray-900 mb-2">Components</h3> <ul class="space-y-1 text-sm"> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Buttons</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Forms</a></li> <li><a href="#" class="block py-1 text-gray-600 hover:text-gray-900">Navigation</a></li> </ul> </div> </nav> </aside> `
The sticky top-0 combo keeps it visible during scrolling. Add scrollbar-thin for custom scrollbar styling if using the plugin.
Example: Dark Mode Sidebar
Modern dark sidebar design with gradient accents and smooth hover effects.
` <aside class="w-72 h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-gray-100"> <div class="p-6"> <div class="flex items-center gap-3 mb-8"> <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center"> <span class="text-xl font-bold">A</span> </div> <span class="text-xl font-semibold">Acme Inc</span> </div> <nav class="space-y-1"> <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl bg-white/10 text-white"> <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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path> </svg> Dashboard </a> <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-400 hover:bg-white/5 hover:text-white transition-colors"> <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> Projects </a> <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-400 hover:bg-white/5 hover:text-white transition-colors"> <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> Calendar </a> <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-400 hover:bg-white/5 hover:text-white transition-colors"> <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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> </svg> Reports </a> </nav> </div> </aside> `
The bg-white/10 creates a subtle highlight for active state styling. Transition effects handle the smooth hover states.
Example: Sidebar with Icons and Badges
Notification badges and icon navigation for apps that need visual indicators.
` <aside class="w-64 h-screen bg-white border-r flex flex-col"> <div class="p-4 border-b"> <h1 class="text-xl font-bold text-gray-800">Workspace</h1> </div> <nav class="flex-1 p-4"> <ul class="space-y-2"> <li> <a href="#" class="flex items-center justify-between px-4 py-2 rounded-lg bg-blue-50 text-blue-700"> <div class="flex items-center gap-3"> <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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path> </svg> Inbox </div> <span class="px-2 py-0.5 text-xs font-medium bg-blue-600 text-white rounded-full">12</span> </a> </li> <li> <a href="#" class="flex items-center justify-between px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-3"> <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="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path> </svg> Starred </div> </a> </li> <li> <a href="#" class="flex items-center justify-between px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-3"> <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> Snoozed </div> <span class="px-2 py-0.5 text-xs font-medium bg-gray-200 text-gray-600 rounded-full">3</span> </a> </li> <li> <a href="#" class="flex items-center justify-between px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-3"> <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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> Sent </div> </a> </li> </ul> </nav> </aside> `
Badge counts use rounded-full with padding to create pill shapes. Great for email clients, messaging apps, or task managers.
Example: Minimal Sidebar with Hover States
Clean, minimal sidebar design focused on responsive design principles.
` <aside class="w-56 h-screen bg-gray-50"> <nav class="p-4"> <ul class="space-y-1"> <li> <a href="#" class="block px-4 py-2 text-sm font-medium text-gray-900 rounded-md bg-gray-200"> Overview </a> </li> <li> <a href="#" class="block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-gray-900"> Notifications </a> </li> <li> <a href="#" class="block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-gray-900"> Messages </a> </li> <li> <a href="#" class="block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-gray-900"> Billing </a> </li> <li> <a href="#" class="block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-gray-900"> Help </a> </li> </ul> </nav> </aside> `
No icons, no complexity. Just text links with subtle hover feedback. Works well when you want the content area to be the focus.
How to Create a Tailwind Sidebar
Building a sidebar from scratch takes about 10 minutes once you know the pattern.
How to Set Up the Sidebar Container
Start with a flex layout that separates sidebar from main content:
` <div class="flex"> <aside class="w-64 h-screen bg-gray-100"> <!-- Sidebar content --> </aside> <main class="flex-1"> <!-- Page content --> </main> </div> `
The h-screen makes the sidebar full viewport height. Use flex-1 on main so it fills remaining space.
How to Add Navigation Links
Stack links vertically with consistent spacing:
` <nav class="p-4"> <ul class="space-y-2"> <li> <a href="#" class="block px-4 py-2 rounded-lg hover:bg-gray-200"> Home </a> </li> <li> <a href="#" class="block px-4 py-2 rounded-lg hover:bg-gray-200"> About </a> </li> </ul> </nav> `
The space-y-2 adds 0.5rem gap between items. Adjust to space-y-1 for tighter spacing.
How to Make the Sidebar Responsive
Hide sidebar on mobile, show on larger screens:
` <aside class="hidden md:flex md:w-64 md:flex-col h-screen bg-gray-100"> <!-- Desktop sidebar --> </aside> `
Add a mobile menu button that appears only on small screens:
` <button class="md:hidden p-2"> <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="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> `
The md: prefix applies styles at 768px and above. Below that, sidebar hides and the hamburger menu shows.
How to Add Collapse and Expand Functionality
Use Alpine.js for quick toggle behavior:
` <div x-data="{ open: true }"> <button @click="open = !open" class="p-2"> Toggle </button> <aside :class="open ? 'w-64' : 'w-16'" class="h-screen bg-gray-100 transition-all duration-300"> <nav class="p-4"> <a href="#" class="flex items-center gap-3 px-4 py-2"> <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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> <span x-show="open">Home</span> </a> </nav> </aside> </div> `
The transition-all duration-300 smooths the width change. Icons stay visible while text labels hide when collapsed.
FAQ on Tailwind Sidebar Examples
How do I create a basic Tailwind sidebar?
Use a flex container with an aside element set to w-64 h-screen for width and full height. Add bg-gray-100 for background color. Place your nav links inside with space-y-2 for vertical spacing between items.
How do I make a Tailwind sidebar responsive?
Apply hidden md:flex to hide the sidebar on mobile and show it on medium screens. Create a separate hamburger menu for smaller viewports that triggers an off-canvas drawer using transform utilities.
How do I add icons to a Tailwind sidebar?
Use SVG icons from Heroicons or Lucide Icons inline with your link text. Wrap both in a flex container with items-center gap-3. Add w-5 h-5 to control icon size consistently.
How do I create a collapsible Tailwind sidebar?
Toggle between w-64 and w-16 using Alpine.js or vanilla JavaScript. Add transition-all duration-300 for smooth animation. Hide text labels with x-show while keeping icons visible in the collapsed state.
How do I style the active state in a Tailwind sidebar?
Apply a distinct background like bg-gray-200 or bg-blue-50 to the active link. Change text color to match. Most developers also add font-medium to make the current page link stand out visually.
How do I add a dark mode Tailwind sidebar?
Use bg-gray-900 text-white as your base. Apply hover:bg-white/10 for subtle hover effects. Tailwind's dark mode variant lets you toggle themes with dark: prefix classes throughout your sidebar component.
How do I create nested menus in a Tailwind sidebar?
Build an accordion structure with nested ul elements. Use Alpine.js to toggle visibility on click. Indent child items with ml-4 and reduce font size with text-sm for clear hierarchy.
How do I make a fixed Tailwind sidebar that stays on scroll?
Add fixed left-0 top-0 h-screen to lock the sidebar in place. Your main content needs ml-64 to offset the sidebar width. The sidebar stays visible while page content scrolls independently.
Which Tailwind component libraries include sidebar templates?
Tailwind UI offers premium sidebar components. Flowbite and DaisyUI provide free alternatives. Headless UI pairs well with custom designs. Each library handles accessibility and responsive behavior differently, so test before committing.
How do I add notification badges to a Tailwind sidebar?
Create a small span with px-2 py-0.5 text-xs rounded-full bg-red-500 text-white next to your link text. Use justify-between on the parent flex container to push the badge to the right edge.
Conclusion
These Tailwind sidebar examples give you a solid foundation for any project, from simple vertical navigation to complex multi-level sidebar structures.
Copy the code, adjust the utility classes, and ship.
The patterns work across React, Vue.js, and plain HTML. Pair them with Alpine.js for toggle behavior or build your own with vanilla JS.
Focus on getting the responsive breakpoints right. Test the mobile sidebar menu on real devices.
Add transition effects for polish, but keep performance in mind.
Your sidebar is often the first thing users interact with. Make it fast, make it accessible, and make it yours.
Now go build something worth clicking.
