HTML `<menu>` Element: Creating Command and Option Menus

Learn how to use the HTML `<menu>` element to create semantically correct command and option menus in your web pages. This tutorial explains its usage, styling options with CSS, and how it differs from standard unordered lists (`

`), improving both accessibility and user experience.

---

---

Understanding the HTML <menu> Element

What is the <menu> Element?

The HTML <menu> element defines an unordered list of commands or options. It's often used to create a menu of choices for a user, similar to a navigation menu. The <menu> element is functionally very similar to the <ul> (unordered list) element; browsers treat them largely the same. The <menu> element is often styled differently than a standard unordered list to emphasize its purpose as a menu.

Example:

HTML

<menu>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</menu>

Browser Support

The <menu> element enjoys wide support across modern browsers.

Browser	Support
Chrome	Yes
Firefox	Yes
Internet Explorer	Yes
Safari	Yes
Edge	Yes
Opera	Yes

Styling <menu> with CSS

While browsers often render <menu> elements with default bullet points, you can style them with CSS to change their appearance and better fit your design. This often involves removing default bullet points and using other techniques to create a visually appealing menu.

Example:

CSS

menu {
  list-style-type: none; /* Remove default bullets */
  padding-left: 20px;
}

---