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

451

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

side bar
html css

Author:
Hacker Development

5 months ago

504
gallary
html , css

Author:
Hacker Development

5 months ago

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

Author:
Pardha Saradhy Madabhushi

1 year ago

2.1k
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

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

Author:
Muhammad Rizqi Juniyanto

11 months ago

2.9k
gallary
html , css

Author:
Hacker Development

5 months ago

633
Sticky left sidebar

Author:
Lucas Martinez

2 years ago

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

5 months ago

530
Tailwind Sidebar Layout

Author:
Junior Gauze

11 months ago

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

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

Author:
TailwindFlex

3 years ago

18.6k
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components