Tailwind Sidebar Layout

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

Sidebar Navbar

Author Junior Gauze

Tailwind v3.4 2.5k 8

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">

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

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

Related Examples

Responsive navbar with dark mode support
Sidebar on small screen devices

TailwindFlex

4 years ago

20.5k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.5k
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.

Eamon Carter

2 years ago

28.9k
Daystar Day care Dashboard
Daystar Day care Dashboard

Paul Livingstone Ssenoga

2 years ago

11.4k
Tailwind Sidebar Layout

nejaa badr

2 years ago

9.2k
Tailwind Sidebar Layout
Place edited for the search button

Nur Pratap Karki

2 years ago

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

Pardha Saradhy Madabhushi

2 years ago

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

Muhammad Rizqi Juniyanto

1 year ago

3.9k
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

Ameth Galarcio

1 year ago

4.6k
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'

Hielke Brandsma

1 year ago

4k
Admin panel with collapsible menus

Rajesh Maheshwari

1 year ago

6.5k
Sidebar with only icons

Rajesh Maheshwari

1 year ago

2.8k