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

1.2k

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

Material 3 Drawer [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

8 months ago

613
Notification
Dev Community Notification Clone

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

1 year ago

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

1 year ago

3.4k
Sidebar with only icons

Author:
Rajesh Maheshwari

11 months ago

2k
Sticky left sidebar

Author:
Lucas Martinez

2 years ago

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

Author:
Pardha Saradhy Madabhushi

1 year ago

2.6k
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

8.1k
Features Component

Author:
KULDEEP

6 months ago

1k
Sidebar Off canvas
How it Works: Off-Canvas Sidebar Component This component uses HTML5, Tailwind CSS, and Vanilla JavaScript to create a smooth, performant sidebar navigation. The Trigger Mechanism: The Menu Button uses an onclick="toggleSidebar()" event to trigger the opening sequence. We use a semantic <button> tag for accessibility. The UI Structure (HTML & Tailwind): Overlay (#sidebar-overlay): A fixed inset-0 div covers the entire screen with a semi-transparent black background (bg-black/50). It starts hidden and transparent (opacity-0 hidden) to prevent interaction when closed. Sidebar Panel (#sidebar-panel): Positioned with fixed top-0 left-0 h-full, it occupies the full height of the screen. Animation State: We use transform -translate-x-full to hide the panel completely off-screen to the left by default. The transition-transform duration-300 class ensures the sliding movement is smooth. The Logic (JavaScript): The toggleSidebar() function handles the state: Opening: It removes the -translate-x-full class (sliding the panel into view) and removes hidden/opacity-0 from the overlay (fading it in). Closing: It adds the classes back to reverse the animation. Crucially, it uses setTimeout(..., 300) when closing. This delays the hidden class application by 300ms, allowing the CSS fade-out animation to complete fully before the element is removed from the flow. Flexbox Layout: The panel uses flex flex-col to vertically stack the Header, Content, and Footer. The middle section has flex-1 overflow-y-auto, ensuring that if the menu items exceed the screen height, only that area scrolls while the header and footer stay pinned.

Author:
Juan D. Cortorreal

1 month ago

152
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.4k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

61.5k
Sidebar with Tailwind CSs and alpinejs

Author:
Michael Andreuzza

1 year ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components