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
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, and keyboard accessibility.
Key features include:
- 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.
- Option to use as a navigation menu or standard dropdown.
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 |
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. | string | 'chevron-down' |
intent | intent | Visual intent of the dropdown button. Options include: ‘primary’, ‘secondary’, ’tertiary’, ‘ghost’, ‘ghostInverse’. | "ghost" | "ghostInverse" | "primary" | "secondary" | "tertiary" | 'tertiary' |
label | label | Label for the dropdown button. | string | undefined |
rounded | rounded | Whether the dropdown button has rounded (pill) styling. | boolean | false |
Events
| Event | Description | Type |
|---|---|---|
dropdown | Event emitted when the dropdown toggles, indicating the new expanded/collapsed state | CustomEvent<{ expanded: boolean; }> |
Dependencies
Used by
Depends on
Graph
Built with StencilJS
Last updated on