previously Vue Storefront Build Better Storefronts

Dropdown

The SfDropdown component is built on top of useDropdown and accepts all its params.

Learn more about useDropdown hook in the Hooks > useDropdown docs.

Examples

Basic Usage

By default, the floating content of SfDropdown will be placed below your trigger element.

Accessibility notes

The floating content area has an aria-hidden attribute that reflects the visibility of the dropdown (modelValue). When the dropdown is not open (modelValue is false), the aria-hidden attribute is set to true, ensuring that the content is hidden from assistive technologies.

Playground