Home
Juan D. Cortorreal
Sidebar Off canvas

Sidebar Off canvas

How it Works: Off-Canvas Sidebar Component

This component uses HTML5, Tailwind CSS, and Vanilla JavaScript to create a smooth, performant sidebar navigation.

The Trigger Mechanism:

The Menu Button uses an onclick="toggleSidebar()" event to trigger the opening sequence.

We use a semantic <button> tag for accessibility.

The UI Structure (HTML & Tailwind):

Overlay (#sidebar-overlay): A fixed inset-0 div covers the entire screen with a semi-transparent black background (bg-black/50). It starts hidden and transparent (opacity-0 hidden) to prevent interaction when closed.

Sidebar Panel (#sidebar-panel): Positioned with fixed top-0 left-0 h-full, it occupies the full height of the screen.

Animation State: We use transform -translate-x-full to hide the panel completely off-screen to the left by default. The transition-transform duration-300 class ensures the sliding movement is smooth.

The Logic (JavaScript): The toggleSidebar() function handles the state:

Opening: It removes the -translate-x-full class (sliding the panel into view) and removes hidden/opacity-0 from the overlay (fading it in).

Closing: It adds the classes back to reverse the animation. Crucially, it uses setTimeout(..., 300) when closing. This delays the hidden class application by 300ms, allowing the CSS fade-out animation to complete fully before the element is removed from the flow.

Flexbox Layout:

The panel uses flex flex-col to vertically stack the Header, Content, and Footer.

The middle section has flex-1 overflow-y-auto, ensuring that if the menu items exceed the screen height, only that area scrolls while the header and footer stay pinned.

This tailwind example is contributed by Juan D. Cortorreal, on 03-Dec-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Sidebar

Author Juan D. Cortorreal

Fork Fullscreen

<div class="flex-1 overflow-y-auto p-4">
        <nav class="space-y-2">
            <a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-green-50 hover:text-green-600 rounded-xl transition-all font-medium">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
                Inicio
            </a>
            <a href="registro.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-green-50 hover:text-green-600 rounded-xl transition-all font-medium">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" /></svg>
                Registro
            </a>
            <button onclick="toggleDonations(); toggleSidebar()" class="w-full flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-green-50 hover:text-green-600 rounded-xl transition-all font-medium text-left">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                Donaciones
            </button>
        </nav>
    </div>

<div class="p-6 border-t border-gray-100">
        <a href="#" class="flex items-center justify-center w-full py-3 bg-gray-900 text-white rounded-xl font-bold hover:bg-gray-800 transition shadow-lg">
            Contáctanos
        </a>
    </div>
</div>

Related Examples

sidebar

Author:
Abhishek Kumar

3 months ago

394
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

7 months ago

898
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 year ago

3.8k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

7 months ago

1.2k
Sidebar with only icons

Author:
Rajesh Maheshwari

9 months ago

1.9k
gallary
html , css

Author:
Hacker Development

7 months ago

543
sidebar

Author:
Abhishek Kumar

3 months ago

575
Features Component

Author:
KULDEEP

5 months ago

946
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

3 years ago

19.2k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

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

1 year ago

3.3k
sidebar
This sidebar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar 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 background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - 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 the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

1 year ago

4.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components