Home
Nick Girga
Material 3 Drawer [Light]

Material 3 Drawer [Light]

A sidebar drawer that conforms to Google's Material 3 design guidelines

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

Sidebar

Author Nick Girga

606

Fork Fullscreen

<body data-theme="light">
    
    
    <div class="flex flex-col items-center gap-8 my-16">
        <h1 id="fake-page-heading" class="text-4xl font-bold text-[var(--color-on-surface)]">Inbox Page</h1>
        <label for="my-drawer" class="btn">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">

<label id="inbox-drawer-item"
                for="my-drawer"
                class="drawer-sidebar-item drawer-sidebar-item-active"
                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>

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

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

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

<hr />

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

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

</div>
    </div>

</body>

<script>
    // Change the fake page (just a demo for the live preview)
    window.fakePageChange = function(drawerItemId, 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
        document.getElementById(drawerItemId).classList.add('drawer-sidebar-item-active');

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

Related Examples

gallary
html , css

Author:
Hacker Development

7 months ago

727
sidebar

Author:
Abhishek Kumar

3 months ago

394
Sidebar with only icons

Author:
Rajesh Maheshwari

9 months ago

1.9k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

9 months ago

4.9k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

10 months ago

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

Author:
Muhammad Rizqi Juniyanto

1 year ago

3.1k
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
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

61.1k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

1 year ago

5.1k
Elegant Animated Drawer
Useful Tailwind classes for constructing an animated sidebar drawer that can be controlled via labels. The component itself is pure CSS and does not require JavaScript to use (although this example uses a bit of JS).

Author:
Nick Girga

7 months ago

702
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

1 year ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components