Dropdowns

A dropdown menu displays a list of actions for a user to make a decision.

  • Code
  • Usage
Dropdowns are used for a list of actions like an options menu of Cards and Table rows which are usually accompanied by Icons.

When there are more than a few options to choose from, you can wrap them in a Dropdown. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action. 
<div class="pdropdown-menu">
    <div class="menu-section">
        <div class="menu-title">
            <p>Title</p>
        </div>
        <div class="menu-links">
            <div class="menu-link">
                <div class="icon-container">
                    <i class="material-symbols-outlined">question_answer</i>
                </div>
                <p>Label</p>
            </div>
            <div class="menu-link">
                <div class="icon-container">
                    <i class="material-symbols-outlined">question_answer</i>
                </div>
                <p>Label</p>
            </div>
            <div class="menu-link">
                <div class="icon-container">
                    <i class="material-symbols-outlined">cached</i>
                </div>
                <p>Label</p>
            </div>
        </div>
    </div>
    <div class="menu-section">
        <div class="menu-title">
            <p>Title</p>
        </div>
        <div class="menu-link red">
            <div class="icon-container">
                <i class="material-symbols-outlined">close</i>
            </div>
            <p>Label</p>
        </div>
    </div>
</div>
content_copy
General guidelines
  • Navigate in a menu of options to perform an action.

  • Respond to a question or prompt from a set of possible answers.

  • Keep the interface uncluttered.
Structure
1
Title: It is optional. Informs users about the options theme.
2
Navigation: Each option has a hover and active color to guide the user.
3
Icon: It is optional. Each option can be reinforced with a specific icon.
4
Accent Color: As in any call to action, reinforcement colors are implemented.
DO
  • Use this component when there are too many options to display as buttons.
  • When you need to offer a call to action without affecting the rest of the information in a page or component.
DON'T
  • If a user is selecting a single text option from a group of options within a form, consider using a select component, radio group, or checkboxes instead.