Menus
Menus components. Based on Headless UI Popover component. Support multi level sub menus.
Usage
Use <Menus /> component to create menu.
View Code
<script setup lang="ts">const items = [ { header: 'Header Menu', }, { title: 'Edit', icon: 'ic:round-edit', shortcut: 'ctrl + e', }, { title: 'Remove', icon: 'ic:round-close', shortcut: 'alt + r', onClick() { alert('Removed') }, }, { divider: true, }, { title: 'Child Menu', to: '#', children: [ { to: '/menu/1', title: 'Menu 1' }, { to: '/menu/2', title: 'Menu 2' }, { to: '/menu/3', title: 'Menu 3' }, { title: 'Sub Child Menu', to: '#', children: [ { to: '/menu/1', title: 'Menu 1' }, { to: '/menu/2', title: 'Menu 2' }, { to: '/menu/3', title: 'Menu 3' }, ], }, ], },]</script><template> <Menus title="Home" /> <Menus title="About" /> <Menus title="Settings" :items="items" /></template>Props
| Prop | Type | Default Value |
|---|---|---|
title | string | '' |
to | string | RouteLocation | '' |
items | MenuItem[] | [] |
isChild | boolean | false |
placement | MenuPlacement | '' |
Event
None.
Types
export type MenuPlacement = 'top' | 'bottom' | 'left' | 'right' | 'bottom-right' | 'right-child'type MenuItem = InstanceType<typeof MenusItem>['$props']