eds-dropdown
Explore the Interactive Component
Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.
See It in Use with Code
Check out this practical implementation of component.
In React
Basic auto-close (default)
Prevent specific elements from closing
Disable auto-close
Overview
EdsDropdown is a versatile dropdown component that provides a list of items
that appear upon clicking the dropdown button. It supports various customization options,
such as positioning, styling, keyboard accessibility, and automatic closing behavior.
Key Features:
- Configurable dropdown position (left or right) and offset
- Customizable intent styles (e.g., primary, secondary)
- Keyboard navigation with support for up and down arrow keys
- Automatic closing on clicks inside the dropdown panel
- Flexible opt-in/opt-out mechanisms for closing behavior
- Option to use as a navigation menu or standard dropdown
Auto-Close Behavior:
By default (autoClose: true), the dropdown closes when any element inside the panel is clicked.
This includes links, buttons, custom elements, or any other clickable content.
Data Attributes:
data-dropdown-close: Force close dropdown when clicked (works regardless of autoClose setting)data-dropdown-no-close: Prevent dropdown from closing when this element or its children are clicked
This component is well-suited for use in menus, navigational elements, and other interactive UI patterns.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
ariaLabel | aria-label | Accessible label for the dropdown button. | string | 'Open dropdown' |
asNav | as-nav | Specifies whether the dropdown acts as a navigation menu. | boolean | true |
autoClose | auto-close | Auto-close dropdown prop - when true, any click inside the panel closes the dropdown | boolean | true |
dropdownOffset | dropdown-offset | Offset spacing for the dropdown relative to the button. | boolean | true |
dropdownPos | dropdown-pos | Position of the dropdown relative to the button. | "left" | "right" | 'left' |
icon | icon | Icon displayed on the dropdown button. | "copy" | "arrow-right" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "arrow-left" | "arrow-up-right" | "close" | "add" | "edit" | "checkmark" | "download" | "upload" | "view" | "exit" | "caretSort" | "bookmark" | "createLink" | "activity" | "account" | "analytics" | "template" | "documentExport" | "documentDownload" | "trashCan" | "chooseItem" | "copyLink" | "dragHorizontal" | "dragVertical" | "login" | "logout" | "move" | "replicate" | "sortAscending" | "sortDescending" | "requestQuote" | "reset" | "resultDraft" | "share" | "play" | "book" | "chatOff" | "forum" | "shareKnowledge" | "time" | "help" | "customerService" | "code" | "rocket" | "compass" | "menu" | "search" | "settings" | "notification" | "user" | "group" | "save" | "document" | "folder" | "image" | "calendar" | "information" | "warning" | "error" | "checkmark-filled" | "star" | "thumbs-up" | "thumbs-down" | "twitter" | "linkedin" | "facebook" | "youtube" | "mastodon" | "bluesky" | 'chevron-down' |
intent | intent | Visual intent of the dropdown button. Options include: ‘primary’, ‘secondary’. | "brand" | "ghost" | "neutral" | "primary" | "secondary" | 'ghost' |
label | label | Label for the dropdown button. | string | undefined |
noCloseSelector | no-close-selector | Opt-out attribute - elements with this attribute won’t trigger auto-close | string | '[data-dropdown-no-close]' |
Events
| Event | Description | Type |
|---|---|---|
dropdown | Event emitted when the dropdown toggles, indicating the new expanded/collapsed state | CustomEvent<{ expanded: boolean; }> |
Methods
close() => Promise<void>
Returns
Type: Promise<void>
Dependencies
Used by
Depends on
Graph
graph TD; eds-dropdown --> eds-button eds-button --> eds-icon-wrapper eds-user --> eds-dropdown style eds-dropdown fill:#f9f,stroke:#333,stroke-width:4px
Built with StencilJS