Nielsen Design System

Last Updated on Dec 15, 2022

A menu displays a list of options for a user to decide between. They can be single or multi-select and can include trees.

Component Variants

In Progress

Menus can be triggered by clicking on an action icon, button, or select. Most menus are modals, but menus can be used inline too.
When triggering using a button, the button must have an arrow icon to the right. When triggering using an action icon, use a carat or the menu icon.
Menus dismiss as soon as the user clicks away on anything not contained inside the menu or if the user clicks the button/action-icon/select again.
There are menu item options for Select All, Clear, Count, Search, Loading, Heading, Subheading, and Divider.
If there is an error loading results, use the compact version of our empty state to show the error.
Menus items can contain switches to make binary choices. A menu with switches is not selectable. The switches are used to turn items on and off, like table columns in the adjustment bar.
Guidance on multi-column and tree menus is coming soon.

If you have control of the data, use a logical order for the options in the menu. For example, if the options are States, order them alphabetically.

Add headings and dividers to help categorize menu items. Check with developers to be sure it’s possible for that data type.

If you have a large list of options, align the maximum height of the menu to our layout design token sizes.

Don't use a Menu as a general list. Items in a Menu should be actionable.

Don’t mix single and multi-select menu options. A menu must be one or the other.

Table of Contents

Related Components