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

613

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

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

9 months ago

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

Author:
AKASH GANDHAR

1 year ago

9.2k
sidebar

Author:
Abhishek Kumar

5 months ago

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

Author:
Muhammad Rizqi Juniyanto

1 year ago

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

9 months ago

1.3k
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

1 month ago

119
Dashboard sidebar

Author:
farid

1 year ago

4.7k
Features Component

Author:
KULDEEP

7 months ago

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

Author:
TailwindFlex

3 years ago

19.5k
Sticky sidebar menu for big screens

Author:
Prajwal Hallale

2 years ago

12.8k
Basic sidebar

Author:
Rajesh Maheshwari

11 months ago

2.1k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

1 year ago

5.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components