SelectableDropdown

Menu anchored to the button on lg+ (≥1024px). On max-lg, the same options appear in BottomActionSheet (bottom panel, keyboard ↑ ↓ Esc). Optional: sheet-title prop for the sheet title; by default placeholder is used.

Usage

<SelectableDropdown 
  :items="items" 
  :selected-item="selectedItem"
  placeholder="Select an option"
  @select="handleSelect" 
/>

Props

Prop	Type	Required	Description
items	Array	Yes	Array of items to display in the dropdown
selectedItem	Object \| String \| Number	No	Currently selected item
placeholder	String	No	Placeholder text when no item is selected (default: "Select")
sheetTitle	String	No	Title for the bottom sheet at ≤1024px; if empty, `placeholder` is used
buttonClass	String	No	Additional CSS classes for the button
getItemKey	Function	No	Function to get unique key for each item
getItemLabel	Function	No	Function to get display label for each item
isItemSelected	Function	No	Function to check if item is selected
getDisplayText	Function	No	Function to get display text for button
getItemIcon	Function	No	Function to get icon for each item (optional)

Events

Event	Description
@select	Emitted when an item is selected. Payload: selected item

Features

Keyboard (floating menu, lg+)

↑ / ↓ — Navigate up/down
Enter / Space — Select highlighted item
Escape — Close

On max-lg the list uses BottomActionSheet; arrow keys move focus between button elements, Esc closes (see the BottomActionSheet page).

Dynamic Positioning

Automatically opens up or down based on available space in the viewport.

Accessibility

Keyboard navigation support
Auto-closes on window resize or blur
Click outside to close

Examples

Common use cases for the dropdown component:

Basic Usage

Simple dropdown with string items:

Selected: None

Object Items

Dropdown with object items (like demo selection):

Selected: None

Custom Functions

Dropdown with custom getItemLabel and getItemIcon:

Selected: None

Code Examples

Basic Usage

<template>
  <SelectableDropdown
    :items="items"
    :selected-item="selectedItem"
    placeholder="Select an option"
    @select="handleSelect"
  />
</template>

<script>
export default {
  data() {
    return {
      items: ['Option 1', 'Option 2', 'Option 3'],
      selectedItem: null
    }
  },
  methods: {
    handleSelect(item) {
      this.selectedItem = item
    }
  }
}
</script>

Object Items

<template>
  <SelectableDropdown
    :items="demos"
    :selected-item="currentDemo"
    placeholder="Demo"
    @select="selectDemo"
  />
</template>

<script>
export default {
  data() {
    return {
      demos: [
        { id: 1, name: 'Master - Extended mix' },
        { id: 2, name: 'Mixdown - Radio edit' },
        { id: 3, name: 'Instrumental' }
      ],
      currentDemo: null
    }
  },
  methods: {
    selectDemo(demo) {
      this.currentDemo = demo
    }
  }
}
</script>

Custom Functions

<template>
  <SelectableDropdown
    :items="items"
    :selected-item="selectedItem"
    :get-item-label="(item) => item.title"
    :get-item-icon="(item) => item.icon"
    :get-item-key="(item, index) => item.id"
    placeholder="Choose"
    @select="handleSelect"
  />
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: 'First Option', icon: 'icon-1' },
        { id: 2, title: 'Second Option', icon: 'icon-2' }
      ],
      selectedItem: null
    }
  },
  methods: {
    handleSelect(item) {
      this.selectedItem = item
    }
  }
}
</script>