Menu

Demo and Developer GuidelinesFigma Component

Anatomy

While there are some elements you can add to menu, all multi selects include search, tokens, dropdown, active and inactive options, a clear input icon, and a collapse / expand caret icon.

Options

Menu options are sentence case without punctuation unless it is a proper noun or a user-inputted option.

Focused Option

When the dropdown is first displayed, the first option is highlighted. As the user scrolls or uses the up or down arrow keys, the focused option is highlighted.

Selected Option

When an option is selected, the font of that option is blue and bolded, and that option appears as plain text within the field. If an item name is too long, it will wrap to the next line.

Types

Single Line Menu

This the most common menu type. It is used in components like dropdown, select, and multi select. Bear in mind that single line items can wrap to the next line.

Double Line Menu

Double line menus can be used in selects if more than one piece of information needs to be presented. This should not exceed 3 lines of text.

States

Variations

Specifications

Padding

Styling