Menu
A styled list of actions or options. The
<menu> element is styled directly — no class
needed. Place it inside a [popover] for a dropdown, or
use it standalone anywhere.
Default
<menu>
<li><button class="ghost">Edit</button></li>
<li><button class="ghost">Duplicate</button></li>
<li><button class="ghost">Share</button></li>
<li><hr /></li>
<li><button class="ghost destructive">Delete</button></li>
</menu>With icons
<menu>
<li>
<button class="ghost">
<svg><!-- edit icon --></svg>
Edit
</button>
</li>
<li>
<button class="ghost">
<svg><!-- copy icon --></svg>
Duplicate
</button>
</li>
<li>
<button class="ghost">
<svg><!-- share icon --></svg>
Share
</button>
</li>
<li><hr /></li>
<li>
<button class="ghost destructive">
<svg><!-- trash icon --></svg>
Delete
</button>
</li>
</menu>With section labels
A <li> whose only child is a text-only
<small> renders as a muted section header.
<menu>
<li><small>Actions</small></li>
<li><button class="ghost">New File</button></li>
<li><button class="ghost">New Folder</button></li>
<li><hr /></li>
<li><small>Danger zone</small></li>
<li><button class="ghost destructive">Delete</button></li>
</menu>With radios
Radio inputs inside <label>s show a checkmark on
the selected item. The input itself is hidden.
<menu>
<li><small>Sort by</small></li>
<li>
<label>
<input type="radio" name="sort" value="newest" checked /> Newest
</label>
</li>
<li>
<label> <input type="radio" name="sort" value="oldest" /> Oldest </label>
</li>
<li>
<label> <input type="radio" name="sort" value="name" /> Name </label>
</li>
</menu>With checkboxes
Checkboxes show a filled square when checked and a faint empty square when unchecked, making each option clearly toggleable.
<menu>
<li><small>Columns</small></li>
<li>
<label> <input type="checkbox" name="name" checked /> Name </label>
</li>
<li>
<label> <input type="checkbox" name="size" checked /> Size </label>
</li>
<li>
<label> <input type="checkbox" name="type" /> Type </label>
</li>
<li>
<label> <input type="checkbox" name="modified" /> Modified </label>
</li>
</menu>