Combinations

SelectMenu provides various component combination application scenario examples

Multiple grouped item selection with search

Application scenarios that combine text search, multiple grouping, and single selection functions

Select your NBA team

template

<SelectMenuDropdown>
  <template #trigger>
    <SelectMenuTrigger>{{ selected || 'Open' }}</SelectMenuTrigger>
  </template>

  <SelectMenuBody>
    <SelectMenuSubHeader>NBA teams</SelectMenuSubHeader>
    <SelectMenuSearch @search="handleSearch" />
    <SelectMenuDivider />
    <SelectMenuRadioGroup v-model="selected">
      <SelectMenuGroup>
        <SelectMenuGroupItem
          name="east"
          title="East"
        >
          <SelectMenuSection style="max-height: 250px;">
            <SelectMenuRadioItem
              :key="item.id"
              :value="item.name"
              v-for="item in filteredEastTeams"
            >
              {{ item.name }}
            </SelectMenuRadioItem>
          </SelectMenuSection>
        </SelectMenuGroupItem>
        <SelectMenuGroupItem
          name="west"
          title="West"
        >
          <SelectMenuSection style="max-height: 250px;">
            <SelectMenuRadioItem
              :key="item.id"
              :value="item.name"
              v-for="item in filteredWestTeams"
            >
              {{ item.name }}
            </SelectMenuRadioItem>
          </SelectMenuSection>
        </SelectMenuGroupItem>
      </SelectMenuGroup>
    </SelectMenuRadioGroup>
  </SelectMenuBody>
</SelectMenuDropdown>

<button
  type="button"
  @click="selected = ''"
>Clear selection</button>

js

import { ref, computed } from 'vue'

import {
  SelectMenuDropdown,
  SelectMenuTrigger,
  SelectMenuBody,
  SelectMenuDivider,
  SelectMenuSearch,
  SelectMenuGroup,
  SelectMenuGroupItem,
  SelectMenuRadioGroup,
  SelectMenuRadioItem,
  SelectMenuSection
} from 'v-selectmenu'

import { eastTeams, westTeams } from './data'

const search = ref('')
const selected = ref('')

const filteredEastTeams = computed(() => {
  if (!search.value) return eastTeams
  return eastTeams.filter(val => val.name.includes(search.value))
})
const filteredWestTeams = computed(() => {
  if (!search.value) return westTeams
  return westTeams.filter(val => val.name.includes(search.value))
})

function handleSearch (value) {
  search.value = value
}

data source

export const eastTeams = [
  {id:1 ,name:'Chicago Bulls'},
  {id:2 ,name:'Cleveland Cavaliers'},
  {id:3 ,name:'Detroit Pistons'},
  ...
]
export const westTeams = [
  {id:16,name:'Denver Nuggets'},
  {id:17,name:'Minnesota Timberwolves'},
  {id:18,name:'Oklahoma City Thunder'},
  {id:19,name:'Portland Trail Blazers'},
  ...
]

Multiple level menu with selection

Interests: [ "Jobs", "Video games" ]

Language: English

The icons used in the menu are from Bootstrap Icons

template

<SelectMenuDropdown>
  <template #trigger>
    <SelectMenuTrigger>User Setting</SelectMenuTrigger>
  </template>

  <SelectMenuBody>
    <SelectMenuSubHeader>Account: Terry</SelectMenuSubHeader>
    <SelectMenuDivider />
    <SelectMenuItem>
      <template #prepend>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
          <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"/>
        </svg>
      </template>
      Notifications
    </SelectMenuItem>
    <SelectMenuChildLevel>
      <template #trigger>
        <SelectMenuItem>
          <template #prepend>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-translate" viewBox="0 0 16 16">
              <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z"/>
              <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
            </svg>
          </template>
          Language
        </SelectMenuItem>
      </template>

      <SelectMenuRadioGroup v-model="language">
        <SelectMenuRadioItem value="Simplified Chinese">Simplified Chinese</SelectMenuRadioItem>
        <SelectMenuRadioItem value="English">English</SelectMenuRadioItem>
        <SelectMenuRadioItem value="German - Deutsch">German - Deutsch</SelectMenuRadioItem>
        <SelectMenuRadioItem value="Dutch - Nederlands">Dutch - Nederlands</SelectMenuRadioItem>
        <SelectMenuRadioItem value="Portuguese - Portugal">Portuguese - Portugal</SelectMenuRadioItem>
      </SelectMenuRadioGroup>
    </SelectMenuChildLevel>
    <SelectMenuChildLevel>
      <template #trigger>
        <SelectMenuItem>
          <template #prepend>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16">
              <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/>
            </svg>
          </template>
          Interests
        </SelectMenuItem>
      </template>

      <SelectMenuCheckboxGroup v-model="interests">
        <SelectMenuCheckboxItem value="Social News">Social News</SelectMenuCheckboxItem>
        <SelectMenuCheckboxItem value="Events">Events</SelectMenuCheckboxItem>
        <SelectMenuCheckboxItem value="Video games">Video games</SelectMenuCheckboxItem>
        <SelectMenuCheckboxItem value="Jobs">Jobs</SelectMenuCheckboxItem>
      </SelectMenuCheckboxGroup>
    </SelectMenuChildLevel>

    <SelectMenuItem>
      <template #prepend>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle" viewBox="0 0 16 16">
          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
          <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"/>
        </svg>
      </template>
      Helps
    </SelectMenuItem>
    <SelectMenuItem>
      <template #prepend>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
          <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
          <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
        </svg>
      </template>
      More settings
    </SelectMenuItem>
    <SelectMenuDivider />
    <SelectMenuItem>
      <template #prepend>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z"/>
          <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"/>
        </svg>
      </template>
      Logout
    </SelectMenuItem>
  </SelectMenuBody>
</SelectMenuDropdown>

js

import { ref } from 'vue'

import {
  SelectMenuDropdown,
  SelectMenuTrigger,
  SelectMenuBody,
  SelectMenuSubHeader,
  SelectMenuDivider,
  SelectMenuItem,
  SelectMenuChildLevel,
  SelectMenuRadioGroup,
  SelectMenuRadioItem,
  SelectMenuCheckboxGroup,
  SelectMenuCheckboxItem
} from 'v-selectmenu'

const interests = ref(['Jobs', 'Video games'])
const language = ref('English')