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.

120

<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

8 months ago

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

Author:
Dmitry

1 year ago

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

Author:
Bernard Omuse

9 months ago

1.1k
Nav Bar
Animated Mobile Dropdown menu

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

5 months ago

1.4k
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

4 months ago

1.3k
Drinkware landing page

Author:
Maxim

3 months ago

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

Author:
Rathanak Phan

6 months ago

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

1 month ago

433
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.8k
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

7 months ago

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

Author:
Asher Wilde

2 years ago

18.9k
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:
SANJAY SINGH GARIYA

1 month ago

185

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components