## 导航
这里是导航
```javascript
import { menu, menuItem, subMenu } from '@58fe/p5';
```
引用的组件使用过程中，可以加前缀`p5-`进行使用，`p5-menu`, `p5-menu-item`, `p5-menu-submenu `
### 基本用法
设置`active-name`可以指定选中的菜单
:::demo 按钮
```html
Nav one
Nav two-submenu
option 1
option 2
Nav three
```
:::
## 主题
选择主题 `theme`为`light`、`dark`两种模式，默认为`light`。
:::demo 按钮
```html
Nav one
Nav two-submenu
option 1
option 2
Nav three
light
dark
```
:::
## 方向
选择主题 `mode`为`horizontal`、`vertical`两种模式，默认为`vertical`。
:::demo 按钮
```html
Nav one
Nav two-submenu
option 1
option 2
Nav three
vertical
horizontal
```
:::
## 伸缩
缩起内嵌菜单，使用`collapsed`属性来控制，布尔值，默认为false。
其中，需要缩起来的部分，需要被class为`collapsed-span`所包裹。
:::demo 按钮
```html
option 1
option 2
off
open
```
:::
### 参数
#### Menu
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| mode | 结构模式 | String | 'vertical', 'horizontal' | 'vertical' |
| activeName | 当前展开项 | Number|String | —— | —— |
| theme | 菜单主题 | String | 'light', 'dark' | 'light' |
| collapsed | 菜单是否可缩小 | Boolean | —— | false |
#### MenuItem
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| name | 与activeName为同一个值，则为默认展开项 | Number|String | —— | —— |
#### SubMenu（子菜单项）
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| name | 与activeName为同一个值，则为默认展开项 | Number|String | —— | —— |