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

151

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

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

9 months ago

2.8k
Sticky left sidebar

Author:
Lucas Martinez

2 years ago

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

9 months ago

1.7k
Dashboard sidebar

Author:
farid

9 months ago

3.4k
Elegant Animated Drawer (Responsive)
A static sidebar when the screen is >=lg. It collapses into a drawer when the screen is <lg. Still requires no JavaScript to function (although this example uses a bit of JS).

Author:
Nick Girga

3 months ago

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

Author:
TailwindFlex

3 years ago

18.3k
Features Component

Author:
KULDEEP

1 month ago

281
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

5 months ago

3.4k
Sidebar with only icons

Author:
Rajesh Maheshwari

5 months ago

1.2k
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

6.9k
Tailwind Sidebar Layout

Author:
Junior Gauze

9 months ago

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

9 months ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components