Dropdown

Introduction

Dropdowns present a list of options for the user to choose from, it supports different types of interactive elements, including links, checkboxes, and radio buttons.

Variants

• Basic dropdown: A flexible dropdown where you can insert any content you like; text, links, checkboxes, or custom content.
• Dropdown group: Supports multiple levels. When a user clicks an item, a secondary dropdown appears to the right.
• Dropdown item: Designed for listing internal or external links, with a designated section at the bottom that is visually separated from the rest of the content.

Interactive demo

Try the interactive demo below to explore different dropdown variants and placements.

Best practices

• Clear labels: Use clear and concise labels for dropdown items to ensure users can quickly understand their options.
• Logical grouping: Organize related items together within the dropdown to enhance usability and navigation.
• Limit options: Avoid overwhelming users with too many options; consider using grouping to keep the list manageable.

States

Dropdown items can have different states to indicate their purpose:

• Default: The standard state for dropdown items.
• Inactive: Used for actions that are currently unavailable. Give the user feedback on why the action is inactive, for example by using a tooltip.
• Alert: Used for actions that are potentially destructive or require extra caution, such as deleting an item.

Examples

Here are some examples of usage of the dropdown component:

Dropdown in components

Dropdowns can be used within various components. See the links below for more information on how dropdowns can be integrated with these components.