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

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

Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

14.4k
Tailwind Sidebar Layout

Author:
Oliver Hansen

1 year ago

48.7k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

1 year ago

19.7k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

6 months ago

4.6k
Tailwind Sidebar Layout

Author:
nejaa badr

5 months ago

3.7k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

4 months ago

1.6k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
Pardha Saradhy Madabhushi

3 months ago

714
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

2 weeks ago

446
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 day ago

29
Navbar with Icon on the left, links and call to actions on the right

Author:
Anonymous

3 months ago

917
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

1 year ago

16.4k
Dashboard sidebar

Author:
farid

2 weeks ago

409

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8