Github

Dropdown

Dropdowns present a list of actions or options in a temporary overlay.

Component variations

Position

Contains: bottom-left, bottom-center, bottom-right, top-left, top-center, top-right, left-start, right-start. Bottom-left is default

Dropdown Items

Simple

Contains a list of actions that have a title with optional icon and description.

With divider

A divider can be used to separate the contents.

Grouped content

Organize related items into groups that will have optional group title/name

Single Select

Only one item can be selected at a time. Uses [selectable]="true" with external state to enforce single selection — selecting a new item deselects the previous one.

Multi Select

Each item toggles independently. Uses [selectable]="true" with a per-item boolean state, allowing any combination of items to be selected simultaneously.

Usage Guidelines

Import

Import the dropdown component in your module or component:

import-dropdown.ts

Copy code

Basic Implementation

Here is a basic example of using the dropdown component:

dropdown-example.html

Copy code

Simple Dropdown Item

Basic dropdown with simple items containing title, icon, and optional description:

simple-dropdown.html

Copy code

Dropdown with Divider

Use dividers to separate related items into visual groups:

dropdown-divider.html

Copy code

Dropdown with Grouped Content

Organize related items into groups that will have group title:

dropdown-grouped.html

Copy code

Single Select

Use [selectable]="true" with external state to enforce single selection. Bind [selected] to a comparison against the current value and update the value via (selectedChange):

dropdown-single-select.html

Copy code

Multi Select

Each item manages its own boolean state independently. Bind [selected] to a per-item property and update it directly via (selectedChange):

dropdown-multi-select.html

Copy code

Listening to Select Events

Handle dropdown item selection by listening to the (select) event emitted by vd-dropdown-item:

dropdown-select-event.html

Copy code

dropdown-select-event.ts

Copy code

API Reference

VdDropdown - Inputs

Property
Type
Default
Required
Description
position
'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right' | 'left-start' | 'right-start'
'bottom-left'
No
Position where the dropdown menu will appear relative to the trigger

VdDropdownItem - Inputs

Individual dropdown menu items with optional icon and description.

Property
Type
Default
Required
Description
title
string
-
Yes
The main text displayed in the dropdown item
description
string
-
No
Optional secondary text displayed below the title
icon
string
-
No
Name of the icon to display before the content
disabled
boolean
false
No
Whether the item is disabled and cannot be clicked
selectable
boolean
false
No
Enables selection mode. Shows a checkmark indicator and emits selectedChange instead of select on click
selected
boolean
false
No
Whether the item is currently selected. Use with [selectable]="true"

VdDropdownItem - Outputs

Event
Type
Description
select
EventEmitter<void>
Emitted when the item is clicked. Only fires when selectable is false
selectedChange
EventEmitter<boolean>
Emitted when the selected state changes. Only fires when selectable is true. Emits the new boolean state

VdDropdownItemGroup - Inputs

Groups related dropdown items together with an optional title.

Property
Type
Default
Required
Description
name
string
-
No
Optional group title displayed above the group items

VdDropdownItemDivider

Visual separator between dropdown items or groups. No inputs required.

Best Practices

When to Use

  • Use Dropdown when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Dropdown when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use dropdowns for contextual menus and action lists
  • Keep dropdown menus focused with 3-7 items when possible
  • Position dropdowns to avoid clipping at viewport edges
  • Use clear, action-oriented labels for dropdown items
  • Ensure dropdown content is accessible via keyboard navigation
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the dropdown features in this section

example.html

Copy code