Dropdown

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

Examples

Basic Usage

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

<template>
  <SfDropdown v-model="isOpen">
    <template #trigger>
      <SfButton @click="toggle()">Toggle</SfButton>
    </template>
    <ul class="p-2 rounded bg-gray-100">
      <li>More</li>
      <li>About</li>
      <li>Settings</li>
    </ul>
  </SfDropdown>
</template>

<script lang="ts" setup>
import { SfDropdown, useDisclosure, SfButton } from '@storefront-ui/vue';

const { isOpen, toggle } = useDisclosure();
</script>

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