# @dove-ui/menu

> A menu component for vue.

Latest version **0.1.2** (published 2020-06-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dove-ui/menu
pnpm add @dove-ui/menu
yarn add @dove-ui/menu
bun add @dove-ui/menu
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2020-06-14 |
| First published | 2020-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 779.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lanyue |
| Maintainers | lanyue |
| Keywords | menu, vue-menu |

## Links

- npm: https://www.npmjs.com/package/@dove-ui/menu
- Repository: https://github.com/mengdu/dove-ui/menu
- Homepage: https://mengdu.github.io/dove-ui/menu
- Issues: https://github.com/mengdu/dove-ui/menu/issues
- npm.io page: https://npm.io/package/@dove-ui/menu

## Recent versions

- 0.1.2 (latest) — 2020-06-14
- 0.1.0 — 2020-01-18

## README

# Menu

A menu component for vue.

```js
import VcMenu from '@dove-ui/menu'
import '@dove-ui/menu/dist/index.css'

Vue.use(VcMenu) // VcMenu
```

```html
<vc-menu :menus="menus" theme="dark"></vc-menu>
```

![](screenshot.png)

### Menu Attributes

| Attribute      | Description        | Type                    | Accepted Values | Default |
|----------------|--------------------|-------------------------|-----------------|---------|
| menus          | Menus object       | [MenuItem[]](#MenuItem) | —               | —       |
| theme          | Menu theme         | string                  | `dark`/`light`  | —       |
| current-active | Selected items     | any[]                   | —               | []      |
| multiple       | Multiple selection | boolean                 | true/false      | false   |
| render-item    | Custom item render | function                | —               | —       |
| open-active    | Auto open selected | function                | true/false      | —       |

### Menu Events

| Name     | Description        | Values                |
|----------|--------------------|-----------------------|
| selected | Selected item      | [MenuItem](#MenuItem) |
| open     | Open submenu item  | [MenuItem](#MenuItem) |
| close    | Close submenu item | [MenuItem](#MenuItem) |

### Menu Slot-scopes

| Name | Description        | Values                |
|------|--------------------|-----------------------|
| item | Custom item render | [MenuItem](#MenuItem) |

**Custom item render**

```html
 <vc-menu :menus="menus" :current-active="['item4']" theme="dark">
  <!-- before vue 2.6.0
  <template slot-scope="menu" slot="item">
    <img :src="logo" alt="" style="vertical-align:middle;width:12px;margin-right:5px;">
    <span>{{menu.label}}</span>
  </template> -->

  <!-- vue 2.6.0+ -->
  <template v-slot:item="menu">
    <img :src="logo" alt="" style="vertical-align:middle;width:12px;margin-right:5px;">
    <span>{{menu.label}}</span>
    <span style="font-size: 12px;margin-left:10px;opacity:0.5;">{{menu.description}}</span>
  </template>
</vc-menu>
```

### MenuItem

| Type            | Attribute        | Description                |
|-----------------|------------------|----------------------------|
| string/function | menus[].label    | item label                 |
| MenuItem[]      | menus[].children | submen                     |
| boolean         | menus[].group    | item is group              |
| boolean         | menus[].open     | open submenu               |
| string          | menus[].name     | unique item name           |
| string/object   | menus[].router   | router-link#to             |
| function        | menus[].hanlde   | item click handle function |
| string          | menus[].link     | link url                   |
| string          | menus[].target   | link tergat                |
| string          | menus[].title    | title                      |
| string          | menus[].type     | `line` Divider line        |
| string          | menus[].hide     | hidden item                |

---
_Source: https://npm.io/package/@dove-ui/menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._