# Dropdown

Dropdown component

# Most common usage scenario

<template>
  <div style="display: flex;">
    <div style="position: relative; display: inline-block;">
      <SfButton @click="isOpen = true">Choose your action</SfButton>
      <SfDropdown
        :class="customClass"
        :is-open="isOpen"
        :title="title"
        @click:close="isOpen = false"
      >
        <SfList>
          <SfListItem v-for="(action, key) in actionList" :key="key">
            <SfButton
              class="sf-button--full-width sf-button--underlined color-primary"
              @click="isOpen = !isOpen"
              >{{ action }}</SfButton
            >
          </SfListItem>
        </SfList>
      </SfDropdown>
    </div>
  </div>
</template>
<script>
import { SfDropdown } from "@storefront-ui/vue";
import { SfList } from "@storefront-ui/vue";
import { SfButton } from "@storefront-ui/vue";
export default {
  components: {
    SfDropdown,
    SfList,
    SfButton,
  },
  data() {
    return {
      isOpen: false,
      actionList: ["Add to cart", "Add to compare", "Add to wishlist", "Share"],
      title: "Choose size",
    };
  },
};
</script>

# Props

  • isOpen

    • Dropdown is open
    • type: boolean
    • defaultValue: false
  • title

    • Title for dropdown content, visible on mobile.
    • type: string
    • defaultValue: ""

# Slots

  • title

    • Use this slot to replace title.
    • bindings: title
  • default

    • Use this slot to place content inside the dropdown.
  • cancel

    • Use this slot to replace cancel button.
    • bindings: close

# Events

  • click:close

# CSS modifiers

  • .sf-dropdown--up

# CSS custom properties (variables)

  • --dropdown-position
  • --dropdown-width
  • --dropdown-top
  • --dropdown-bottom
  • --dropdown-transform
  • --dropdown-background
  • --dropdown-box-shadow
  • --dropdown-title-padding
  • --dropdown-title-font
  • --dropdown-title-font-weight
  • --dropdown-title-font-size
  • --dropdown-title-font-line-height
  • --dropdown-title-font-family
  • --dropdown-animation-enter
  • --dropdown-animation-leave

# Overridden other components CSS variables

  • --button-background
  • --button-color
  • --button-display

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.