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

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

Author:
TailwindFlex

2 years ago

17.8k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

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

25.6k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

8.6k
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

6.6k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

1 year ago

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

Author:
Pardha Saradhy Madabhushi

11 months ago

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

Author:
Muhammad Rizqi Juniyanto

8 months ago

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

8 months ago

2.8k
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'

Author:
Hielke Brandsma

7 months ago

2.6k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

4 months ago

2.7k
Sidebar with only icons

Author:
Rajesh Maheshwari

4 months ago

963

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components