Home
Nick Girga
Material 3 Menu [Light]

Material 3 Menu [Light]

A menu that conforms to Google's Material 3 design guidelines

This tailwind example is contributed by Nick Girga, on 25-May-2025. Component is made with Tailwind CSS v3.

293

<link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
</head>

<h1 class="text-lg font-bold mt-4">Hidden Menus</h1>

<div class="relative">

<label for="menu-1" class="btn">Basic Menu</label>

<div class="menu-overflow">

<input id="menu-1" type="checkbox" class="hidden peer" />

<label for="menu-1" class="menu-overlay"></label>

<div class="menu menu-hidden">

<label for="menu-1">
            <span class="material-symbols-outlined">visibility</span>
            Item 1
          </label>

<label for="menu-1">
            <span class="material-symbols-outlined">content_copy</span>
            Item 2
          </label>

<label for="menu-1">
            <span class="material-symbols-outlined">edit</span>
            Item 3
          </label>

</div>
      </div>
    </div>

<div class="relative">

<label for="menu-2" class="btn">Nested Menus</label>

<div class="menu-overflow">

<input id="menu-2" type="checkbox" class="hidden peer" />

<label for="menu-2" class="menu-overlay"></label>

<div class="menu menu-hidden">

<label for="menu-2">
            <span class="material-symbols-outlined">visibility</span>
            Item 1
          </label>

<label for="menu-2">
            <span class="material-symbols-outlined">content_copy</span>
            Item 2
          </label>

<label for="menu-2">
            <span class="material-symbols-outlined">edit</span>
            Item 3
          </label>

<hr />

<label for="menu-3">
            <span class="material-symbols-outlined">cloud</span>
            Item 4
            <span class="material-symbols-outlined ml-4">arrow_right</span>
          </label>

</div>
      </div>

<div class="menu-overflow ml-[8.65rem] mt-[8rem]">

<input id="menu-3" type="checkbox" class="hidden peer" />

<label for="menu-3" class="menu-overlay"></label>

<div class="menu menu-hidden">

<label for="menu-3"
                onclick="document.getElementById('menu-2').checked = false;">
                  <span class="material-symbols-outlined">visibility</span>
                  Item 1
                </label>

<label for="menu-3"
                onclick="document.getElementById('menu-2').checked = false;">
                  <span class="material-symbols-outlined">content_copy</span>
                  Item 2
                </label>

<label for="menu-3"
                onclick="document.getElementById('menu-2').checked = false;">
                  <span class="material-symbols-outlined">edit</span>
                  Item 3
                </label>
        </div>
      </div>
    </div>

<h1 class="text-lg font-bold mt-4">Always Open Menu</h1>
    
    <div class="menu">

<button>
        <span class="material-symbols-outlined">visibility</span>
        Item 1
      </button>

<button for="menu-2">
        <span class="material-symbols-outlined">content_copy</span>
        Item 2
      </button>

<button for="menu-2">
        <span class="material-symbols-outlined">edit</span>
        Item 3
      </button>

</div>

</body>

Related Examples

Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

11 months ago

1.8k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

172
Dropdown select on hover
this example does not uses javascript

Author:
Thomas Taylor

1 year ago

2.1k
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

8 months ago

2k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

2 years ago

20.1k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

9 months ago

1.3k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

7 months ago

1.6k
Dropdown menu without using javascript
Open the dropdown menu on hover

Author:
Asher Wilde

2 years ago

19.4k
Active Beauty Main Page

Author:
Maxim

7 months ago

919
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

5 months ago

611
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Maxim

10 months ago

4.3k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

3 years ago

17.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components