Dropdown

In progress

A dropdown provides a raised surface for displaying a list of contextual actions in front of the current view. The major benefit of utilizing dropdowns, based on the principle of progressive disclosure, is the ability to reduce clutter and cognitive load by grouping contextual UI behind an interaction. Note: dropdowns are only used for responsive web and Android experiences. When designing and building for iOS, use a bottom sheet component instead.

Dropdown

Anatomy

The dropdown component is made up of a trigger, raised surface, and a list of choices for the user to select from. There are two dropdown variations: menu dropdown, and input dropdown. Both the menu and input dropdown variants can be used as single select or multi-select dropdowns. 

Menu dropdown

The menu dropdown variant is triggered by tapping or clicking on either a static trigger or dynamic trigger (more on triggers at the bottom of this menu dropdown section). The trigger can be one of four options: quick action button, icon only, label and icon combo, or label and caret combo — each trigger option has unique features and behaviors.

Quick action button trigger

The quick action button trigger allows the dropdown to be triggered by interacting with the quick action button. Any icon can be used within the quick action button. What’s unique about this trigger option is a badge can be utilized to show how many selections have been made.

  1. Quick action component
  2. Badge (optional)
  3. Raised surface
  4. Selected item indicator (see also cloaked checkbox or cloaked radio button)
  5. Selected item background (see states matrix)
  6. Divider (optional)
  7. List item label
  8. List item icon (optional)
  9. Selected item label — Subtitle 1 (see also cloaked checkbox or cloaked radio button) 

Badges represent how many list items have been selected by the user. Usability when selecting multiple list items starts to take a hit when more than just a handful of selections are made. If a user may want to select more than 5 selection, consider using a different solution. A bottom sheet or side sheet could be a great place to list out a large group of chips that a user could add/remove one by one instead of tediously selecting from a dropdown (that could easily be cancelled inadvertently. 

Icon only trigger

The icon only trigger allows the dropdown to be triggered by the click of an icon. The icon does not display any affordances (other than color) to indicate an interaction is possible (if a higher emphasis trigger is needed, use the quick action button trigger).

  1. Icon only trigger
  2. Raised surface
  3. Divider (optional)
  4. List item label
  5. List item icon (optional)

Label and icon combo trigger

The label and icon combo trigger combines both an icon and text label as a call to action. Any icon can be used with this trigger option.

  1. Label and icon trigger label
  2. Label and icon trigger icon
  3. Raised surface
  4. Divider (optional)
  5. List item label
  6. List item icon (optional)

Label and caret combo trigger

This combo trigger is unique because the caret will spin around to provide affordance for the user both when the dropdown is open or closed.

  1. Trigger label — Body 1
  2. Trigger icon
  3. Raised surface
  4. Divider (optional)
  5. List item label
  6. List item icon (optional)

Static triggers

The static trigger maintains a consistent label and/or icon before and after a selection is made. Both the icon only trigger and quick action trigger are considered to be static since the icon will not change as a result of the user's selection. Both the label and icon combo trigger and the label and caret trigger can be static if the label does not change as a result of the user's selection.

  1. Label and caret trigger (before selection)
  2. Label and caret trigger (after selection)
  1. Quick action button trigger (before selection)
  2. Quick action button trigger (after selection)

Note: Although the quick action button cannot change as a result of a user's selection, a badge can be shown as a way to let the user know how many list items have been selected. A badge cannot be used with any other trigger types.

Dynamic triggers

The dynamic trigger updates the trigger label based on the user uselection, and requires a default selection. Only the label and icon combo trigger and the label and caret trigger can utilize the dynamic updating of the text label (since these are the only triggers with a text label that can be updated).

  1. Label and caret trigger (before selection)
  2. Label and caret trigger (after selection)

Input dropdown

The input variant provides a way for users to make a selection that will then be used as the input within a form, and is always triggered by tapping or clicking anywhere on the input field. Note: To see the differences on clicking the input field in general vs clicking the trailing  icon specifically, check out the behavior section.

  1. Input field trigger (focused state)
  2. Raised surface
  3. Divider (optional)
  4. List item label — Body 1
  5. List item icon (optional)

Specs

Color

In the Alkami Platform, colors play a large role in helping users understand how to interact with the system. Following the Guidance and Affordance color paradigms, dropdowns can reinforce these mental models. When using a dropdown as a way for users to select from a list of actions, use affordance colors.  When using a dropdown as a way for users to navigate to another area of the app, use guidance colors.

Affordance colors (action dropdown)

Element Property Values
Quick action trigger (static) Background color ∆colorPlatformWhite
Quick action trigger (static) Border ∆colorPlatformWhite
Quick action trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (hover) Background color ∆colorBrandedAffordance100
Quick action trigger (hover) Border ∆colorBrandedAffordance100
Quick action trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (pressed) Background color ∆colorBrandedAffordance
Quick action trigger (pressed) Border ∆colorBrandedAffordance
Quick action trigger (pressed) Icon color ∆colorBrandedAffordanceOn
Quick action trigger (selected) Background color ∆colorBrandedAffordance200
Quick action trigger (selected) Border ∆colorBrandedAffordance200
Quick action trigger (selected) Icon color ∆colorBrandedAffordanceOn
Label and icon trigger (static) Label text color ∆colorPlatformGray900
Label and icon trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Label and icon trigger (static) Background color Transparent/none
Label and icon trigger (hover) Label text color ∆colorPlatformGray900
Label and icon trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Label and icon trigger (hover) Background color ∆colorBrandedAffordance100
Label and icon trigger (pressed) Label text color ∆colorBrandedAffordanceOn
Label and icon trigger (pressed) Icon color ∆colorBrandedAffordanceOn
Label and icon trigger (pressed) Background color ∆colorBrandedAffordance
Label and icon trigger (selected) Label text color ∆colorBrandedAffordanceOn
Label and icon trigger (selected) Icon color ∆colorBrandedAffordanceOn
Label and icon trigger (selected) Background color ∆colorBrandedAffordance200
Icon trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (static) Background color Transparent/none
Icon trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (hover) Background color ∆colorBrandedAffordance100
Icon trigger (pressed) Icon color ∆colorBrandedAffordanceOn
Icon trigger (pressed) Background color ∆colorBrandedAffordance
Icon trigger (selected) Icon color ∆colorBrandedAffordanceOn
Icon trigger (selected) Background color ∆colorBrandedAffordance200
List item container (static) Background color Transparent/none
List item container (hover) Background color ∆colorBrandedAffordance100
List item container (pressed) Background color ∆colorBrandedAffordance
List item container (selected) Background color ∆colorBrandedAffordance200
List item text (static) Text color ∆colorPlatform900
List item text (hover) Text color ∆colorPlatform900
List item text (pressed) Text color ∆colorBrandedAffordanceOn
List item text (selected) Text color ∆colorBrandedAffordanceOn
List item icon (static) Icon color ∆colorBrandedAffordanceAccessible
List item icon (hover) Icon color ∆colorBrandedAffordanceAccessible
List item icon (pressed) Icon color ∆colorBrandedAffordanceOn
List item icon (selected) Icon color ∆colorBrandedAffordanceOn
Selected item indicator (static) Icon color N/A
Selected item indicator (hover) Icon color N/A
Selected item indicator (pressed) Icon color ∆colorBrandedAffordanceOn
Selected item indicator (selected) Icon color ∆colorBrandedAffordanceOn
Badge Background color ∆colorBrandedAffordanceOn
Badge Text color ∆colorBrandedAffordanceOn

Guidance colors (navigational dropdown)

Element Property Values
List item container (static) Background color Transparent/none
List item container (hover) Background color ∆colorBrandedGuidance100
List item container (pressed) Background color ∆colorBrandedGuidance
List item container (selected) Background color ∆colorBrandedGuidance200
List item text (static) Text color ∆colorPlatform900
List item text (hover) Text color ∆colorPlatform900
List item text (pressed) Text color ∆colorBrandedGuidanceOn
List item text (selected) Text color ∆colorBrandedGuidanceOn
List item icon (static) Icon color ∆colorBrandedGuidanceAccessible
List item icon (hover) Icon color ∆colorBrandedGuidanceAccessible
List item icon (pressed) Icon color ∆colorBrandedGuidanceOn
List item icon (selected) Icon color ∆colorBrandedGuidanceOn
Selected item indicator (static) Icon color N/A
Selected item indicator (static) Icon color N/A
Selected item indicator (static) Icon color ∆colorBrandedGuidanceOn
Selected item indicator (static) Icon color ∆colorBrandedGuidanceOn

Elevation

Element Property Values
Dropdown raised surface Background color ∆surfacePlatformRaisedBackgroundColor
Dropdown raised surface Shadow color ∆surfacePlatformRaisedShadowColor
Dropdown raised surface Shadow y-offset ∆surfacePlatformRaisedShadowY
Dropdown raised surface Shadow opacity ∆surfacePlatformRaisedShadowOpacity
Dropdown raised surface Shadow blur ∆surfacePlatformRaisedShadowBlurResting
Dropdown raised surface Shadow spread ∆surfacePlatformRaisedShadowSpread

Spacing

Trigger spacing

Standard list item spacing

Standard list item keyline spacing

All list items do not need to have a leading icon, but when mixing list items with and without leading icons, ensure labels always align to the keyline. This ensures that users can quickly scan the list items without the need to bounce back and forth due to some list items not having icons. Keylines also come in handy when list items wrap to multiple lines.

Account list item spacing

Account list item keyline spacing

When account list items have become selected, the account component within the list item compresses down to provide space for the selected item indicator. This creates a keyline in which all the account components in each list item (selected or not) condense down to remain aligned along the right edge.

Selected list items

Once selected, the available horizontal space for list items shrink slightly to make space for the selected item indicator. Once the selected item indicator is shown, the spacing along the right edge of the dropdown changes.

International phone number

Min/max

The width of list items should expand to fill the width of the parent container by default. If the parent container doesn’t make sense to snap to, or the available space is too small (<185px) or too large (>440px) to properly display the dropdown, the width is determined by the longest list item. Once the dropdown reaches 440px wide, the list items should wrap to the next line. 


Badges (used only with quick action button trigger) represent how many list items have been selected by the user. Usability when selecting multiple list items starts to take a hit when more than just a handful of selections are made. If a user may want to select more than 5 selection, consider using a different solution. A bottom sheet or side sheet could be a great place to list out a large group of chips that a user could add/remove one by one instead of tediously selecting from a dropdown (that could easily be cancelled inadvertently.  

States

Labels and icons trigger

The following graphic show the states for both the icon only trigger, label and icon combo trigger, and the label and caret combo trigger.

Quick action trigger

Account list items

Standard list items

Theming

Color

Element Property Values
Quick action trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (hover) Background color ∆colorBrandedAffordance100
Quick action trigger (hover) Border ∆colorBrandedAffordance100
Quick action trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (pressed) Background color ∆colorBrandedAffordance
Quick action trigger (pressed) Border ∆colorBrandedAffordance
Quick action trigger (pressed) Icon color ∆colorBrandedAffordanceOn
Quick action trigger (selected) Background color ∆colorBrandedAffordance200
Quick action trigger (selected) Border ∆colorBrandedAffordance200
Quick action trigger (selected) Icon color ∆colorBrandedAffordanceOn
Label and icon trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Label and icon trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Label and icon trigger (hover) Background color ∆colorBrandedAffordance100
Label and icon trigger (pressed) Label text color ∆colorBrandedAffordanceOn
Label and icon trigger (pressed) Icon color ∆colorBrandedAffordanceOn
Label and icon trigger (pressed) Background color ∆colorBrandedAffordance
Label and icon trigger (selected) Label text color ∆colorBrandedAffordanceOn
Label and icon trigger (selected) Icon color ∆colorBrandedAffordanceOn
Label and icon trigger (selected) Background color ∆colorBrandedAffordance200
Icon trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (hover) Background color ∆colorBrandedAffordance100
Icon trigger (pressed) Icon color ∆colorBrandedAffordanceOn
Icon trigger (pressed) Background color ∆colorBrandedAffordance
Icon trigger (selected) Icon color ∆colorBrandedAffordanceOn
Icon trigger (selected) Background color ∆colorBrandedAffordance200
List item container (hover) Background color ∆colorBrandedAffordance100
List item container (pressed) Background color ∆colorBrandedAffordance
List item container (selected) Background color ∆colorBrandedAffordance200
List item text (pressed) Text color ∆colorBrandedAffordanceOn
List item text (selected) Text color ∆colorBrandedAffordanceOn
List item icon (static) Icon color ∆colorBrandedAffordanceAccessible
List item icon (hover) Icon color ∆colorBrandedAffordanceAccessible
List item icon (pressed) Icon color ∆colorBrandedAffordanceOn
List item icon (selected) Icon color ∆colorBrandedAffordanceOn
Selected item indicator (static) Icon color ∆colorBrandedAffordanceOn
Selected item indicator (static) Icon color ∆colorBrandedAffordanceOn

Shape

Element Property Values
Dropdown container Large component ∆shapeBranded

Spacing

Element Property Values
Standard list item Margin top/bottom ∆spacingBranded
Accounts list item Margin top/bottom ∆shapeBranded


Placement

The default placement of dropdowns should be immediately below the trigger (referred to as the flow down placement) and aligned along the left edge; but due to information density or scroll position, the dropdown can also appear above the trigger (referred to as the flow up placement), aligned along the right edge, or centered vertically or horizontally with the trigger.

  1. Flow down placement aligned along the left edge
  2. Flow down placement aligned along the right edge
  3. Flow up placement aligned along the right edge (but could also be left aligned)
  4. Flow up placement center aligned (could also follow the flow down placement)

Flow down placement

The flow down placement is the default way to position the dropdown component, and is used when the dropdown height is smaller than the distance from the trigger to the bottom of the viewport minus one list item.

  1. The distance from the trigger to the bottom of the viewport
  2. The height of a list item within the dropdown
  3. The height of a list item distance from the bottom of the viewport

Flow up placement

The flow up placement should only be used when there’s not enough space to utilize the flow down placement.

  1. The height of the dropdown component
  2. The distance of the trigger to the bottom fo the viewport is not tall enough to display the entire dropdown, so the flow up placement is used

Scrollable

In most cases, the height of the dropdown is based on the amount of content contained within the dropdown. The exception to this rule is when the height of a dropdown would otherwise be taller than the visible space within the viewport. In this case, a scrollable dropdown should be utilized.


Scrollable dropdowns can follow both the flow down or the flow up placement, and should always maintain at least one list item height distance away from the viewport edge and honor “safe areas” on mobile devices with notches in the display.

Truncation

List items that contain account information can become truncated if there’s not enough horizontal space to display the full account nickname. See the account component for more details about truncation and priorities. Standard list items should never truncate, but wrap to another line.


Behavior

Since dropdowns are always hidden by default, some amount of motion is needed when triggered so the user understands where the contextual content is originating.

Expand and collapse

Expand

When the trigger is tapped or clicked, the dropdown surface fades from 0% to 100% opacity and moves downward 4px into a resting position. In the case of a flow up placement, the surface will move upward 4px into a resting position.

Interaction Steps Duration Easing Notes Haptics
A2-2. Dropdown expand 1a. Fade in ∆motionPlatformTimeFast ∆motionEasingStandard The dropdown surface fades in opacity from 0-100%
1b. Position down ∆motionPlatformTimeFast ∆motionEasingStandard Start from Y Position
-4px into its resting position.
(+4px into its resting position for the reversed dropdown)
1c. Scale in ∆motionPlatformTimeFast ∆motionPlatformEasingStandard Scale 96-100%. The scale's origin point should be set on the side closest to the input.

Collapse

Interaction Steps Duration Easing Notes Haptics
A4-3. Dropdown collapse 1. Dropdown selection ∆motionPlatformTimeFast
2a. Fade out ∆motionPlatformTimeFast ∆motionPlatformEasingStandard The surface fade in 100-0%
2b. Position up ∆motionPlatformTimeFast ∆motionPlatformEasingStandard Return to original position
2c. Scale out ∆motionPlatformTimeFast ∆motionPlatformEasingStandard Scale 100-96%

Dropdown using caret

When using the label with caret combo trigger, the caret should rotate +180° upon opening and closing the dropdown — thus completing a circular movement. The dropdown opening motion is timed to sync with the rotating caret. The image below, while it’s showing an input field, the label with caret combo trigger caret behaves the same.

Input dropdown considerations

Triggering the dropdown from an input field has two distinct outcomes: dropdown expansion only, or dropdown expansion and input focus.

Dropdown expansion only

When the user clicks on the input field trailing icon, the dropdown expands without triggering focus on the input field. What this does for mobile users is avoids the soft keyboard triggering and blocking the view of the dropdown. This is also handy for widescreen users who prefer to select an option with their mouse instead of keying in values manually with their keyboard.  If a selection has already been made, clicking the field trailing icon will still show all fields and not clear selected item text from the input nor set the cursor in the input field. The dropdown will not be filtered until focus is manually moved to the input.

  • When tabbing, focus goes to the input first. 
  • When focus is in the input, the filter feature is activated and non-matching items will vanish from the visible list of options in the dropdown. 
  • Then pressing tab again will go to the button.
  • If enter is pressed while focusing on the button, all dropdown items would show (not be filtered) even if content is in the input, just as it would if a user clicked with a mouse. 
Input focus & dropdown expansion

When the user clicks on any area of the input field other than the trailing icon, both the input field receives focus and the dropdown expands. As the user types characters, only the remaining list items that match the input remain. Almost acting like a filter, a user could continue to type out characters until no list items remain.

Filter and auto-selection rules

Filter the results based on the string typed.  Any part of any visible text (not icons or images or meta data) that matches the typed string should be shown in the dropdown while all other items are removed (filtered out).  Any part of the dropdown items’ string values can be searched/filtered. For example, if a user clicked the Textfield/Input area of a list of US states then typed “te” the items remaining in the dropdown would be Tennessee and Texas. If they typed “na” the results would be Arizona, Indiana, Louisiana, Montana, North Carolina, and South Carolina. 


When the dropdown is triggered, it presents suggested values that complete or logically correspond to the characters typed in the textbox, and the first suggestion is automatically highlighted as selected. The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox. Pressing the Esc key will clear the selection and all text in the input, but the cursor will remain in the input.


If the user types in the field but does not select an item, the field will clear when the focus leaves the field. 


When using the Input Dropdown with a dropdown containing the accounts component, filter on the account nickname and the unmasked portion of the account number. For example if the account Name was “My Checking” and the unmasked account numbers were “4567” this account would appear if tying any part of the string of either the name or the number. 

Interacting outside the dropdown

When tapping or clicking anywhere outside the dropdown surface, the assumption is the user does not intend to interact with the dropdown content, and the dropdown is closed.

View scrolling

If the view is scrolled after opening a dropdown, the dropdown is left open and maintains the same position while allowing the content underneath to continue scrolling. There is no need to adjust the size or position of the opened dropdown once scrolling begins.

Browser resize

The dropdown will be closed automatically if there is a browser resize event. There is no expectation that the dropdown position updates based on a browser resize event.


Developer Docs

Vue Developer Docs

Component documentation coming soon!