Menu items
If a menu item could be used but is currently not an option, keep it in the menu list but have it disabled. Keeping it in the list keeps the user aware of what options exist—even if some can't be performed right now. Disabled items also have 50% opacity and have no interactions or hover state.

Scrollbars

The menu should be tall enough to fit up to 8 items at first glance. After 8 items, the menu becomes vertically scrollable. If the menu has less than 8 items, it should only be as tall as the options in it—no scrollbar needed.

Usage guidelines

General

Do:
Use menus to allow users to perform actions.

Don't:
Use menus to allow users to select options — use a drop-down instead.

Content guidelines

Order
The order of menu items isn't arbitrary—it's driven by data, logic, and research. Generally, the most common actions appear at the top of a menu, or the “ideal” options that a user should select. Ideal meaning the options we want users to select based on their goals and the goals of the business. In most cases, destructive actions like delete are placed at the bottom of the list.

Other ways to structure menus are alphabetically (A-Z) and chronologically (newest to oldest).

Label
Labels should be short, 3 words or fewer. Labels should use title case. Labels should briefly and accurately summarize the menu items.

Items
If the menu items are actions, they should start with verb and then a noun. Be specific.

👍
Try this

Duplicate Policy

❗️
Not this

Duplicate

You can use ellipses when the action doesn't have an immediate effect. Ellipses show users that they need to do something else to complete the action, like choose a printer after selecting Print. Ellipses aren't needed if the item just takes a user to another screen.

👍
Try this

Print...

❗️
Not this

View Advanced Details

Icons
Icons can be used as both the menu's trigger control and to the left of the list items themselves. Refer to the Icon guidelines to make sure you're using the right icons for your selections or labels. Using icons consistently builds recognition and improves their effectiveness.

Separators and section titles
Separators can help build groupings and relationships in sections of a menu. Separators can have titles, like Favorites or Frequently Used.

Placement

Menus are typically aligned with the left of the trigger. Their placement depends on where the trigger is. For example, if the list would be cut off by the bottom of the browser window, it should open upward. Menus also shouldn't “fall off” either side of the screen or hide important content when opened.