SelectableDropdown Component

A reusable dropdown component with keyboard navigation, dynamic positioning, and customizable item rendering.

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")
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 Navigation

  • ↑ / ↓ - Navigate up/down
  • Enter / Space - Select highlighted item
  • Escape - Close dropdown

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>