Home
Junior Gauze
Tailwind Sidebar Layout

Tailwind Sidebar Layout

This tailwind example is contributed by Junior Gauze, on 06-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Sidebar Navbar

Author Junior Gauze

1.1k

4

Fork Fullscreen

<div class="absolute bg-gray-800 text-white w-72 min-h-screen overflow-y-auto transition-transform transform -translate-x-full ease-in-out duration-200"
            id="sidebar">
            
            <div class="p-4">
                <h1 class="text-2xl font-semibold">Sidebar</h1>
                <ul class="mt-4">
                    <li class="mb-2"><a href="#" class="block hover:text-indigo-400">Home</a></li>
                    <li class="mb-2"><a href="#" class="block hover:text-indigo-400">Item 1</a></li>
                    <li class="mb-2"><a href="#" class="block hover:text-indigo-400">Item 2</a></li>
                    <li class="mb-2"><a href="#" class="block hover:text-indigo-400">Item 3</a></li>
                </ul>
            </div>
        </div>

<div class="flex-1 flex flex-col overflow-hidden absolute w-full">
            
            <div class="bg-white shadow">
                <div class="container mx-auto">
                    <div class="flex py-4 px-2">

<button class="text-gray-500 hover:text-gray-600" id="open-sidebar">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                            </svg>
                        </button>

<h1 class="text-xl font-semibold">Menu Collapsed</h1>

</div>
                </div>
            </div>
    
            
    
        </div>

<script>
            const sidebar = document.getElementById('sidebar');
            const openSidebarButton = document.getElementById('open-sidebar');
            
            openSidebarButton.addEventListener('click', (e) => {
                e.stopPropagation();
                sidebar.classList.toggle('-translate-x-full');
            });
    
            // Close the sidebar when clicking outside of it
            document.addEventListener('click', (e) => {
                if (!sidebar.contains(e.target) && !openSidebarButton.contains(e.target)) {
                    sidebar.classList.add('-translate-x-full');
                    }
                });
        </script>

Related Examples

Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

9 months ago

3.6k
Navbar compoent

Author:
Amit Pachange

2 years ago

14.6k
navigation
tailwind navigation pills

Author:
Anonymous

1 year ago

7.9k
Animated underline hover navbar
Simple animated underline hover effect navbar.

Author:
inbarajan P

7 months ago

1.5k
animated navigation bar

Author:
Md. Tofayel islam

3 months ago

1.1k
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

1 month ago

582
Navbar with two CTA buttons

Author:
Juraj

2 months ago

407
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

3 months ago

789
Basic Auto-Hiding Navbar

Author:
Anonymous

4 months ago

1.2k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Author:
Coastal UI

5 months ago

1.7k
Best Responsive Navbar Design | Easy & Modern Navigation
Learn how to create a fully responsive navbar using HTML, CSS, and JavaScript. Perfect for beginners and developers looking for a modern, mobile-friendly navigation bar.

Author:
Vishvajeet

2 months ago

1.4k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

11 months ago

7.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1