# Menu 导航菜单
---
<span class="tit-desc">导航菜单是产品的骨架，是页面的重要构成模</span>

### 菜单

<span class="sub-tit">样式一</span>
<div class="demo-block">
  <y-menu mode="horizontal" theme='primary' active-name="1">
    <Y-sub-menu name="2" class="k-menu-right">
      <template slot="title">
        <svg class="icon icon-logo" aria-hidden="true">
            <use xlink:href="#icon-profile"></use>
        </svg>
        <span>路通货运有限公司</span>
      </template>
      <y-menu-item icon="icon-home" name="2-1">消息通知</y-menu-item>
      <y-menu-item icon="icon-home" name="2-2">退出</y-menu-item>
    </Y-sub-menu>
  </y-menu>  
</div>

::: demo

```html
<div>
  <y-menu mode="horizontal" theme='primary' active-name="1">
    <Y-sub-menu name="2" class="k-menu-right">
      <template slot="title">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-profile"></use>
        </svg>
        <span>路通货运有限公司</span>
      </template>
      <y-menu-item icon="icon-home" name="2-1">消息通知</y-menu-item>
      <y-menu-item icon="icon-home" name="2-2">退出</y-menu-item>
    </Y-sub-menu>
  </y-menu>  
</div>
```
:::


<span class="sub-tit">样式二</span>
<div class="demo-block">
  <y-menu mode="horizontal" theme='light' active-name="1">
    <Y-sub-menu name="2" class="k-menu-right">
      <template slot="title">
        <svg class="icon icon-logo" aria-hidden="true">
            <use xlink:href="#icon-profile"></use>
        </svg>
        <span>路通货运有限公司</span>
      </template>
      <y-menu-item icon="icon-home" name="2-1">消息通知</y-menu-item>
      <y-menu-item icon="icon-home" name="2-2">退出</y-menu-item>
    </Y-sub-menu>
  </y-menu>  
</div>

::: demo

```html
<div>
  <y-menu mode="horizontal" theme='light' active-name="1">
    <Y-sub-menu name="2" class="k-menu-right">
      <template slot="title">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-profile"></use>
        </svg>
        <span>路通货运有限公司</span>
      </template>
      <y-menu-item icon="icon-home" name="2-1">消息通知</y-menu-item>
      <y-menu-item icon="icon-home" name="2-2">退出</y-menu-item>
    </Y-sub-menu>
  </y-menu>
</div>
```
:::

### 垂直导航

<span class="sub-tit">样式一</span>
<div class="demo-block">
  <div v-bind:class="{'demo-isCollapse demo-isCollapse-198':!isCollapse,'demo-isCollapse demo-isCollapse-50':isCollapse}">
    <i class="icon iconfont"
    v-bind:class="{'icon-nav_unfold':isCollapse,'icon-nav_fold':!isCollapse}" 
    @click="openCollapse"></i>
  </div>
  <y-menu mode="vertical" theme='black' active-name="1" :collapse="isCollapse">
    <div class="demo-logo" v-bind:class="{'demo-logo-samll':isCollapse,'demo-logo-big':!isCollapse}">
      <i class="icon-logo"></i>
    </div>
    <y-menu-item icon="icon-home" name="1">
      <i class="icon-nav_overview"></i>
      <span slot="title">概览</span>
    </y-menu-item>
    <Y-sub-menu name="2">
      <template slot="title">
        <i class="icon-nav_vehicle"></i>
        <span slot="title">车辆管理</span>
      </template>
      <y-menu-item icon="icon-home" name="2-1">入网车辆管理</y-menu-item>
      <y-menu-item icon="icon-home" name="2-2">临时车辆管理</y-menu-item>
    </Y-sub-menu>
    <y-menu-item name="3" icon="icon-home">
      <i class="icon-nav_dispatching"></i>
      <span slot="title">调运管理</span>
    </y-menu-item>
    <y-menu-item name="4" icon="icon-home">
      <i class="icon-nav_money"></i>
      <span slot="title">结算管理</span>
    </y-menu-item>
  </y-menu>
</div>
<script>
  export default{
    data(){
      return{
        isCollapse:false,
        isCollapses:false
      }
    },
    methods:{
      openCollapse(){
        if(!this.isCollapse){
          this.isCollapse = true;
        }else{
          this.isCollapse = false;
        }
      },
      openCollapses(){
	      if(!this.isCollapses){
	        this.isCollapses = true;
	      }else{
	        this.isCollapses = false;
	      }
	    },
    }
  }
</script>

::: demo

```html
<template>
  <y-menu mode="vertical" theme='black' active-name="1" :collapse="isCollapse">
    <y-menu-item icon="icon-home" name="1">
      <i class="icon-nav_overview"></i>
      <span slot="title">概览</span>
    </y-menu-item>
    <Y-sub-menu name="2">
      <template slot="title">
        <i class="icon-nav_vehicle"></i>
        <span slot="title">车辆管理</span>
      </template>
      <y-menu-item icon="icon-home" name="2-1">入网车辆管理</y-menu-item>
      <y-menu-item icon="icon-home" name="2-2">临时车辆管理</y-menu-item>
    </Y-sub-menu>
    <y-menu-item name="3" icon="icon-home">
      <i class="icon-nav_dispatching"></i>
      <span slot="title">调运管理</span>
    </y-menu-item>
    <y-menu-item name="4" icon="icon-home">
      <i class="icon-nav_money"></i>
      <span slot="title">结算管理</span>
    </y-menu-item>
  </y-menu>
</template>

<script>
  export default{
    data(){
      return{
        isCollapse:false  
      }
    },
    methods:{
      openCollapse(){
        if(!this.isCollapse){
          this.isCollapse = true;
        }else{
          this.isCollapse = false;
        }
      }
    }
  }
</script>

```
:::

<span class="sub-tit">样式二</span>
<div class="demo-block">
  <div v-bind:class="{'demo-isCollapse demo-isCollapse-198':!isCollapses,'demo-isCollapse demo-isCollapse-50':isCollapses}">
    <i class="icon iconfont"
    v-bind:class="{'icon-nav_unfold':isCollapses,'icon-nav_fold':!isCollapses}" 
    @click="openCollapses"></i>
  </div>
  <y-menu mode="vertical" theme='dark' active-name="1" :collapse="isCollapses">
    <div class="demo-logo" v-bind:class="{'demo-logo-samll':isCollapses,'demo-logo-big':!isCollapses}">
      <i class="icon-logo"></i>
    </div>
    <y-menu-item name="1" icon="icon-home">
      <i class="icon-nav_overview"></i>
      <span slot="title">概览</span>
     </y-menu-item>
    <Y-sub-menu name="2">
      <template slot="title">
        <i class="icon-nav_vehicle"></i>
        <span slot="title">车辆管理</span>
      </template>
      <y-menu-item icon="icon-home" name="2-1">入网车辆管理</y-menu-item>
      <y-menu-item icon="icon-home" name="2-2">临时车辆管理</y-menu-item>
    </Y-sub-menu>
    <y-menu-item name="3" icon="icon-home">
      <i class="icon-nav_dispatching"></i>
      <span slot="title">调运管理</span>
    </y-menu-item>
    <y-menu-item name="4" icon="icon-home">
      <i class="icon-nav_money"></i>
      <span slot="title">结算管理</span>
    </y-menu-item>
  </y-menu>
</div>
<script>
  export default{
    data(){
      return{
        isCollapses:false  
      }
    },
    methods:{
      openCollapses(){
        if(!this.isCollapses){
          this.isCollapses = true;
        }else{
          this.isCollapses = false;
        }
      }
    }
  }
</script>

::: demo

```html
<div>
  <y-menu mode="vertical" theme='dark' active-name="1">
    <y-menu-item name="1" icon="icon-home"><i class="icon-nav_overview"></i>概览</y-menu-item>
    <Y-sub-menu name="2">
      <template slot="title">
        <i class="icon-nav_vehicle"></i>
        <span>车辆管理</span>
      </template>
      <y-menu-item icon="icon-home" name="2-1">入网车辆管理</y-menu-item>
      <y-menu-item icon="icon-home" name="2-2">临时车辆管理</y-menu-item>
    </Y-sub-menu>
    <y-menu-item name="3" icon="icon-home"><i class="icon-nav_dispatching"></i>调运管理</y-menu-item>
    <y-menu-item name="4" icon="icon-home"><i class="icon-nav_money"></i>结算管理</y-menu-item>
  </y-menu>
</div>

<script>
  export default{
    data(){
      return{
        isCollapse:false  
      }
    },
    methods:{
      openCollapse(){
        if(!this.isCollapse){
          this.isCollapse = true;
        }else{
          this.isCollapse = false;
        }
      }
    }
  }
</script>
```
:::

### 水平导航

<span class="sub-tit">样式一</span>
<div class="demo-block">
  <y-menu mode="horizontal" theme='line' active-name="1">
    <y-menu-item name="1" icon="icon-home">一级导航</y-menu-item>
    <Y-sub-menu name="2">
      <template slot="title">
        <span>一级导航</span>
      </template>
      <y-menu-group title="导航二">
        <y-menu-item icon="icon-home" name="2-1">二级导航一</y-menu-item>
        <y-menu-item icon="icon-home" name="2-2">二级导航二</y-menu-item>
      </y-menu-group>
    </Y-sub-menu>
    <y-menu-item name="3" icon="icon-home">一级导航</y-menu-item>
  </y-menu>
</div>

::: demo

```html
<div class="demo-block">
  <y-menu mode="horizontal" theme='line' active-name="1">
    <y-menu-item name="1" icon="icon-home">一级导航</y-menu-item>
    <Y-sub-menu name="2">
      <template slot="title">
        <span>一级导航</span>
      </template>
      <y-menu-group title="导航二">
        <y-menu-item icon="icon-home" name="2-1">二级导航一</y-menu-item>
        <y-menu-item icon="icon-home" name="2-2">二级导航二</y-menu-item>
      </y-menu-group>
    </Y-sub-menu>
    <y-menu-item name="3" icon="icon-home">一级导航</y-menu-item>
  </y-menu>
</div>
```
:::
<span class="sub-tit">样式二</span>
<div class="demo-block">
  <y-menu mode="horizontal" theme='dark' active-name="1">
    <y-menu-item name="1" icon="icon-home">一级导航</y-menu-item>
    <Y-sub-menu name="2">
      <template slot="title">
        <span>一级导航</span>
      </template>
      <y-menu-group title="导航二">
        <y-menu-item icon="icon-home" name="2-1">二级导航一</y-menu-item>
        <y-menu-item icon="icon-home" name="2-2">二级导航二</y-menu-item>
      </y-menu-group>
    </Y-sub-menu>
    <y-menu-item name="3" icon="icon-home">一级导航</y-menu-item>
  </y-menu>
</div>

::: demo

```html
<div>
  <y-menu mode="horizontal" theme='dark' active-name="1">
    <y-menu-item name="1" icon="icon-home">一级导航</y-menu-item>
    <Y-sub-menu name="2">
      <template slot="title">
        <span>一级导航</span>
      </template>
      <y-menu-group title="导航二">
        <y-menu-item icon="icon-home" name="2-1">二级导航一</y-menu-item>
        <y-menu-item icon="icon-home" name="2-2">二级导航二</y-menu-item>
      </y-menu-group>
    </Y-sub-menu>
    <y-menu-item name="3" icon="icon-home">一级导航</y-menu-item>
  </y-menu>
</div>
```
:::


### y-menu 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| mode| 展开的模式   | String  |  horizontal，vertical|  vertical  |
| theme  | 主题   | String    | dark,light  |  light  |
| active-name  | 标识当前选中项   | String    | -  |  - |

### y-menu-item 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| icon     | icon   | String    |  -       |  -  |
| name      | 标识当前选中项，对应active-name   | Nmuber   |  -  |  - |