Home
nejaa badr
Sidebar

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.

This tailwind example is contributed by nejaa badr, on 01-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Sidebar

Author nejaa badr

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Animated Sidebar</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        @keyframes slideOut {
            from { transform: translateX(0); }
            to { transform: translateX(-100%); }
        }
        .sidebar-open {
            animation: slideIn 0.3s forwards;
        }
        .sidebar-closed {
            animation: slideOut 0.3s forwards;
        }
        .nav-item {
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .nav-item:hover {
            transform: translateZ(10px);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-indigo-800 text-white p-5 transform -translate-x-full transition-transform duration-300 ease-in-out z-50">
        <h2 class="text-2xl font-bold mb-5">Dashboard</h2>
        <nav>
            <ul class="space-y-3">
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Home</a></li>
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Analytics</a></li>
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Customers</a></li>
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Settings</a></li>
            </ul>
        </nav>
    </div>

<div class="p-5">
        <button id="sidebarToggle" class="bg-indigo-800 text-white p-2 rounded" aria-label="Toggle Sidebar">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
        <main class="mt-5">
            <h1 class="text-3xl font-bold mb-4">Welcome to the Dashboard</h1>
            <p>This is the main content area. Use the button above to toggle the sidebar.</p>
        </main>
    </div>

sidebarToggle.addEventListener('click', toggleSidebar);

// Close sidebar when clicking outside
        document.addEventListener('click', (event) => {
            if (isOpen && !sidebar.contains(event.target) && event.target !== sidebarToggle) {
                toggleSidebar();
            }
        });

// Add 3D effect to nav items
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('mousemove', (e) => {
                const rect = item.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                item.style.transform = `perspective(1000px) rotateX(${(y - rect.height / 2) / 10}deg) rotateY(${-(x - rect.width / 2) / 10}deg) translateZ(10px)`;
            });

item.addEventListener('mouseleave', () => {
                item.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
            });
        });

// Keyboard accessibility
        sidebarToggle.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                toggleSidebar();
            }
        });

// Trap focus within sidebar when open
        sidebar.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                const focusableElements = sidebar.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
                const firstElement = focusableElements[0];
                const lastElement = focusableElements[focusableElements.length - 1];

if (e.shiftKey && document.activeElement === firstElement) {
                    e.preventDefault();
                    lastElement.focus();
                } else if (!e.shiftKey && document.activeElement === lastElement) {
                    e.preventDefault();
                    firstElement.focus();
                }
            }
        });
    </script>
</body>
</html>

Related Examples

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

Author:
Muhammad Rizqi Juniyanto

1 year ago

2.9k
Material 3 Drawer (Responsive) [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines. Static sidebar when the screen is >=lg. Collapses into a drawer when the screen is <lg.

Author:
Nick Girga

5 months ago

798
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

5 months ago

1k
Dashboard sidebar

Author:
farid

1 year ago

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

5 months ago

606
Responsive Sidebar
Fully Responsive sidebar in both color modes light & dark with mini bar too.

Author:
AKASH GANDHAR

1 year ago

8.1k
Sticky sidebar menu for big screens

Author:
Prajwal Hallale

2 years ago

12.6k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

60.2k
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

7.3k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

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

Author:
Pardha Saradhy Madabhushi

1 year ago

2.3k
Features Component

Author:
KULDEEP

3 months ago

495

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components