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.

133

<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

9 months ago

1.6k
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

1 month ago

403
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

19.9k
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Author:
Shariar Hasan

1 year ago

5.4k
Dropdown
hover dropdown with width of max-w-7xl

Author:
Bernard Omuse

10 months ago

1.2k
Dropdown profile
Using DaisyUI Based on: https://tailwindcomponents.com/component/dropdown-7

Author:
Dmitry

1 year ago

5.6k
Drinkware landing page

Author:
Maxim

4 months ago

945
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

5 months ago

1.5k
Nested dropdown
Nested dropdown without using javascript. It uses details and summary HTML tags for interactivity.

Author:
Emrys11

2 years ago

14k
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

6 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

5 months ago

1.2k
hotel management
This is what you use when you hear that you want to take care of your things while you are staying at a certain hotel.

Author:
Nishimwe Jeanine

2 months ago

185

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components