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 1k 4

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