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 v3.4. It is responsive. similar terms for this example is drawer

Sidebar

Author Juan D. Cortorreal

Tailwind v3.4 959 4

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 responsive
responsive sidebar with working links

Ganesh Salunke

8 months ago

1.2k
Startup Glassmorphism Navbar with Neon Gradient & Floating Navigation
AI startup navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

316
SideBar
Sidebar

nitro-x

2 months ago

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

Pardha Saradhy Madabhushi

2 years ago

3k
gallary
html , css

Hacker Development

1 year ago

1.6k
Sidebar
This HTML file includes: 1. A responsive sidebar with 3D animation effects: 1. The sidebar slides in and out smoothly. 2. Navigation items have a 3D hover effect using CSS transforms and transitions. 2. Tailwind CSS for styling: 1. Included via CDN for easy setup. 2. Used for layout, colors, and basic styling. 3. Custom CSS for animations and 3D effects: 1. Keyframe animations for sidebar open/close. 2. 3D transform effects for nav items. 4. JavaScript for interactivity: 1. Toggles the sidebar open and close. 2. Adds 3D effect to nav items on hover using mouse position. 3. Closes the sidebar when clicking outside. 5. Accessibility features: 1. ARIA label for the toggle button. 2. Keyboard navigation support (Enter/Space to toggle sidebar). 3. Focus trapping within the sidebar when open. 6. Responsive design: 1. The sidebar is full-height and toggleable, suitable for both desktop and mobile views. This implementation provides a visually appealing sidebar with 3D animations and effects, while maintaining accessibility and responsiveness. It uses HTML for structure, Tailwind CSS for styling, and vanilla JavaScript for interactivity, as requested.

nejaa badr

1 year ago

2.7k
Ecommerce Navbar with products, Expanding Search & Mobile sidebar filter
luxury ecommerce navigation bar crafted with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

196
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.6k
Daystar Day care Dashboard
Daystar Day care Dashboard

Paul Livingstone Ssenoga

2 years ago

11.4k
Tailwind Sidebar Layout

Junior Gauze

1 year ago

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

Rajesh Pandey

1 year ago

1.5k
Sticky sidebar menu for big screens

Prajwal Hallale

3 years ago

13k