previously Vue Storefront Build Better Storefronts


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

Learn more about useDropdown composable in the Composables > useDropdown docs.


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.