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

266

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 alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

1 month ago

623
Navbar
This navbar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background and accents 3. Dark mode support with a toggle button 4. Beautiful animations and effects: 1. Fade-in animation for menu items with staggered delays 2. Hover effects on menu items with underline animation 3. Smooth color transitions 4. Mobile menu slide-down animation 5. SVG icons for the dark mode toggle and mobile menu button 6. "Sign Up" call-to-action button 7. Mobile-friendly dropdown menu 8. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The navbar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with color changes and underline animations - The dark mode toggle changes its icon based on the current mode - The mobile menu slides down with a smooth animation when toggled - Desktop menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional navbar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

1 month ago

565
Navbar
E-commerce Navbar

Author:
Aman kumar

6 months ago

1.9k
Navbar Section
Responsive Navbar

Author:
Noob

2 years ago

17.9k
Ticket
Sirve para ticket

Author:
ANGEL EMILIANO MARQUEZ VAZQUEZ

3 weeks ago

127
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

8 months ago

4.9k
New Nav Component
A new navigation component

Author:
Amit PR

7 months ago

1.8k
Navigation bar
Navbar

Author:
Aman kumar

5 months ago

1.9k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Author:
Mamadou Diouma II Bah

1 year ago

12.3k
Sticky left sidebar

Author:
Lucas Martinez

1 year ago

13.2k
Notification
Dev Community Notification Clone

Author:
Samuel Abera

2 weeks ago

444
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

1 week ago

172

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ componenent