List item/Dropdown Menu

List item/Drop Down menu

Usage

A list of actions or selectable options for a user. Each list resemble specific action or selectable item that can be choose by user.

List Item Type

List Item Default

Title Section

Usage: Default state, a checkbox input includes a selected and unselected state.

List item with value

Title Section

Usage: List item with value is used when the list has value to clarify or add info for the list item

List item With icon

Title Section

Usage: List items with icons are usually used when a list item requires an icon to add an action or just to make the options more clear

List item Checkbox

Title Section

Checklist LabelChecklist LabelChecklist Label

Usage: List item checkbox usually used for option that can be selected by user. User can select multiple option with checkbox

List item Select

Title Section

Checklist LabelChecklist LabelChecklist Label

Usage: List item select are usually used for options that only one of them is allowed to be selected by the user.

List item with avatar

Title Section

Usage: List item avatar usually used for option that require image (avatar, etc) to make the options more clear.

List item with subtext

Title Section

Usage: List items with subtext usually used when a list item requires subtext to clarify or add additional info

Note: All types can be combined as needed, except the checkbox and icon used to add actions cannot be used together

List Item Ornament

List item With Divider

Title Section

Usage: List item with divider is used when a list item requires a divider to separate options to make it clear from one list to another

List item With Divider and Gap

Title Section

Usage: List items with divider and gap are usually used to give space between lists

Use Case

Grouping List

Title Section

Usage: Use divider and gap to separate lists that have different contexts from each other

Pattern Rule

Best Practice

• A number of components can be used to give people the ability to select options. See the list of related components below for advice on choosing the right one.
• When organizing dropdown menu items, sort the list in a logical order by putting the most selected option at the top, if known. Test and refine over time to re-evaluate if all menu items are needed.
• For long lists, group related menu items. If including radio buttons and checkboxes as menu items, try grouping related actions.
• Grouped items are separated by a short, uppercase title that describes the options in that sub-category.

Do

• Dropdown menus are typically used when you have 5-15 items to choose from. They’re used for navigation or commands, where an action is initiated based on the selection.
• When organizing dropdown menu items, sort the list in a logical order by putting the most selected option at the top.
• Use for a “more” menu, where the control contains an icon.
• Use for user profiles, where the control is an avatar.
• Use in conjunction with the dropdown item and dropdown group components.

Don’t

• Don’t use for hiding primary actions since they should be visible by default.
• Don’t use for selecting an option from a list of options, use the select component instead.
• Don’t nest elements or components other than the dropdown item and dropdown group components. Consider using the popout component when creating custom UI.