Home
Nick Girga
Material 3 Drawer (Responsive) [Light]

Material 3 Drawer (Responsive) [Light]

Forked from> @nickgirga/material-3-drawer-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.

This tailwind example is contributed by Nick Girga, on 26-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Sidebar

Author Nick Girga

538

Fork Fullscreen

<body data-theme="light">
    
    
    <div class="flex flex-col items-center gap-8 my-16 sm:pl-72">
        <h1 id="fake-page-heading" class="text-4xl font-bold text-[var(--color-on-surface)]">Inbox Page</h1>
        <label for="my-drawer" class="btn sm:hidden">Open Drawer</label>
    </div>

<div>
        
        <input id="my-drawer" type="checkbox" class="hidden peer" />

<label for="my-drawer" class="drawer-overlay"></label>

<div class="drawer-sidebar drawer-sidebar-left sm:drawer-sidebar-open sm:bg-[var(--color-surface)]">

<label for="my-drawer"
                class="inbox-drawer-item drawer-sidebar-item drawer-sidebar-item-active sm:hidden"
                onclick="window.fakePageChange('inbox-drawer-item','Inbox Page');">
                <span class="material-symbols-outlined">inbox</span>
                Inbox
                <span class="ml-auto !text-[0.6rem] opacity-50">24</span>
            </label>
            <button class="inbox-drawer-item drawer-sidebar-item drawer-sidebar-item-active hidden sm:flex"
                onclick="window.fakePageChange('inbox-drawer-item','Inbox Page');">
                <span class="material-symbols-outlined">inbox</span>
                Inbox
                <span class="ml-auto !text-[0.6rem] opacity-50">24</span>
            </button>

<label for="my-drawer"
                class="outbox-drawer-item drawer-sidebar-item sm:hidden"
                onclick="window.fakePageChange('outbox-drawer-item','Outbox Page');">
                <span class="material-symbols-outlined">send</span>
                Outbox
            </label>
            <button class="outbox-drawer-item drawer-sidebar-item hidden sm:flex"
                onclick="window.fakePageChange('outbox-drawer-item','Outbox Page');">
                <span class="material-symbols-outlined">send</span>
                Outbox
            </button>

<label for="my-drawer"
                class="favorites-drawer-item drawer-sidebar-item sm:hidden"
                onclick="window.fakePageChange('favorites-drawer-item','Favorites Page');">
                <span class="material-symbols-outlined">favorite</span>
                Favorites
            </label>
            <button class="favorites-drawer-item drawer-sidebar-item hidden sm:flex"
                onclick="window.fakePageChange('favorites-drawer-item','Favorites Page');">
                <span class="material-symbols-outlined">favorite</span>
                Favorites
            </button>

<label for="my-drawer"
                class="trash-drawer-item drawer-sidebar-item sm:hidden"
                onclick="window.fakePageChange('trash-drawer-item','Trash Page');">
                <span class="material-symbols-outlined">delete</span>
                Trash
            </label>
            <button class="trash-drawer-item drawer-sidebar-item hidden sm:flex"
                onclick="window.fakePageChange('trash-drawer-item','Trash Page');">
                <span class="material-symbols-outlined">delete</span>
                Trash
            </button>

<hr />

<span class="drawer-header">Personal Folders</span>
            
            
            <label for="my-drawer"
                class="family-drawer-item drawer-sidebar-item sm:hidden"
                onclick="window.fakePageChange('family-drawer-item','Family Page');">
                <span class="material-symbols-outlined">folder</span>
                Family
            </label>
            <button class="family-drawer-item drawer-sidebar-item hidden sm:flex"
                onclick="window.fakePageChange('family-drawer-item','Family Page');">
                <span class="material-symbols-outlined">folder</span>
                Family
            </button>

<label for="my-drawer"
                class="wedding-drawer-item drawer-sidebar-item sm:hidden"
                onclick="window.fakePageChange('wedding-drawer-item','Wedding Page');">
                <span class="material-symbols-outlined">folder</span>
                Wedding
            </label>
            <button for="my-drawer"
                class="wedding-drawer-item drawer-sidebar-item hidden sm:flex"
                onclick="window.fakePageChange('wedding-drawer-item','Wedding Page');">
                <span class="material-symbols-outlined">folder</span>
                Wedding
            </button>

</div>
    </div>

</body>

<script>
    // Change the fake page (just a demo for the live preview)
    window.fakePageChange = function(drawerItemSelector, fakePageHeadingText) {
        // disable all drawer item indicators
        const drawerItems = document.querySelectorAll('.drawer-sidebar-item');
        for (const item of drawerItems) {
            if (item.classList.contains('drawer-sidebar-item-active'))
                item.classList.remove('drawer-sidebar-item-active');
        }

// enable specified navbar item
        const activeDrawerItems = document.querySelectorAll("." + drawerItemSelector);
        for (const item of activeDrawerItems) {
            item.classList.add('drawer-sidebar-item-active');
        }

// change fake page heading
        document.getElementById('fake-page-heading').innerHTML = fakePageHeadingText;
    }
</script>

Related Examples

Ticket
Sirve para ticket

Author:
ANGEL EMILIANO MARQUEZ VAZQUEZ

10 months ago

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

Author:
Pardha Saradhy Madabhushi

1 year ago

2k
sidebar

Author:
Abhishek Kumar

3 weeks ago

235
Features Component

Author:
KULDEEP

2 months ago

309
sidebar

Author:
Abhishek Kumar

3 weeks ago

200
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

9.1k
Sticky sidebar menu for big screens

Author:
Prajwal Hallale

2 years ago

12.5k
Sidebar with Tailwind CSs and alpinejs

Author:
Michael Andreuzza

1 year ago

3.2k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

59.7k
Tailwind Sidebar Layout

Author:
Junior Gauze

10 months ago

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

Author:
nejaa badr

10 months ago

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

4 months ago

533

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components