Persona

Appearance

On this page

dropdown 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
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
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

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.

Released under the MIT License.

Copyright © 2022 Privy Identitas Digital