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

Documentation and examples please visit below sites

• github pages

The jQuery version: SelectMenu

• 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

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

<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>

• 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

• v-dropdown - The dropdown container layer