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 v3.4.

Tailwind v3.4 930 3

<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

Shivam Vishwakarma

1 year ago

2.6k
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.

Anonymous

1 year ago

1.7k
Dropdown select on hover
this example does not uses javascript

Alok

3 years ago

31.4k
OMERLINK MENU PAGE
OMERLINK MENU PAGE

Omer fils ELENGA

8 months ago

920
navbar
navbar

Omer fils ELENGA

8 months ago

826
Dropdown menu without using javascript
Open the dropdown menu on hover

Asher Wilde

3 years ago

20.3k
Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA
A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

JUGENDRA GANGWAR

3 months ago

255
Dropdown
hover dropdown with width of max-w-7xl

Bernard Omuse

1 year ago

2.2k
Hamburger menu button with hover effect

_Amar_

3 years ago

18.3k
Drinkware landing page

Maxim

1 year ago

2k
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

9 months ago

603
hero modern
hero modern

Omer fils ELENGA

8 months ago

829