v-selectmenu

SelectMenu for Vue3, A simple, easier and highly customized menu solution

Examples and Documentation

Documentation and examples please visit below sites

• github pages

The jQuery version: SelectMenu

Features

• Provide layout management
• Provide input and button components
• Provide a variety of custom slots
• Support single-select or multi-select mode menu items
• Support multiple groups
• Support multiple levels
• Each functional component can be flexibly combined and applied

Installation

# npm
npm i v-selectmenu
# yarn
yarn add v-selectmenu
# pnpm
pnpm add v-selectmenu

Usage

<template>
  <SelectMenuDropdown>
    <template #trigger>
      <SelectMenuTrigger />
    </template>
    <SelectMenuBody @action="handleAction">
      <SelectMenuHeader>SelectMenu</SelectMenuHeader>
      <SelectMenuItem action="item1">Menu item 1</SelectMenuItem>
      <SelectMenuItem action="item2" disabled>Menu item 2</SelectMenuItem>
      <SelectMenuItem action="item3">Menu item 3</SelectMenuItem>
    </SelectMenuBody>
  </SelectMenuDropdown>
</template>

<script setup>
import {
  SelectMenuDropdown,
  SelectMenuTrigger,
  SelectMenuBody,
  SelectMenuHeader,
  SelectMenuItem
} from 'v-selectmenu'

function handleAction (action) {
  console.log(action)
}
</script>

Components

• SelectMenuDropdown The dropdown container
• SelectMenuTrigger Built-in dropdown trigger button
• SelectMenuBody The menu root container
• SelectMenuSection The menu section container
• SelectMenuBlock The menu block container
• SelectMenuRow Align content horizontally
• SelectMenuColumn Align content vertically
• SelectMenuHeader Menu main header item
• SelectMenuSubHeader Menu sub header item
• SelectMenuDivider Menu divider
• SelectMenuGroup Menu group container
• SelectMenuGroupItem Menu group item
• SelectMenuChildLevel Child level menu container
• SelectMenuInput Menu input component
• SelectMenuButton Menu button component
• SelectMenuItem Menu item
• SelectMenuCheckboxGroup Menu checkbox group
• SelectMenuCheckboxItem Menu checkbox item
• SelectMenuRadioGroup Menu radio group
• SelectMenuRadioItem Menu radio item

License

Dependencies

• v-dropdown - The dropdown container layer

Changelog

Please refer to CHANGELOG-CN for Chinese changelog

3.1.2 (2025-03-09)

Features

• v-dropdown component upgrade to v3.3.0
• SelectMenuTrigger 's rounded prop use medium by default
• Type SelectMenuDropdownUtilities rename to DropdownUtilities
• useSelectMenuDropdown rename to useDropdown

3.1.1 (2024-12-22)

Improvements

• SelectMenuInput's loading uses disabled control
• SelectMenuInput's debounce prop default value changed to 0
• Container root adaptive width
• SelectMenuButton mini mode style optimization

3.1.0 (2024-12-18)

Features

• Added SelectMenuInput input box component
• Added SelectMenuButton button component
• Added SelectMenuBlock component as an inline pure layout component
• Removed SelectMenuSearch component

Improvements

• SelectMenuGroup group switching method optimization
• SelectMenuColumn automatically adapts and evenly distributes width

3.0.3 (2024-12-02)

Improvements

• SelectMenuSection scrollbar adaptation improvement
• When reopening a multilevel menu, always open the root menu
• When switching multilevel menus, reposition the dropdown content container
• Adjust the style of the dropdown content container

3.0.2 (2024-11-29)

Bug Fixes

• Supplementary data type declarations for SelectMenuDropdown and utility functions

3.0.1 (2024-11-29)

Bug Fixes

• Fixed the issue that the menu will automatically close when the multi-level menu triggers object selection
• Fixed the issue that the menu will automatically close when the title series component is clicked

3.0.0 (2024-11-24)

Features

• The v-selectmenu component has been refactored using Vue 3 composition API
• The build tool has been switched from Webpack to Vite
• The unit testing library has been switched from Mocha to Vitest
• Completely redesigned the menu organization