naive-ui/demo/documentation/components/menu/enUS/basic.md

# Basic
```html
<div>
  <n-menu 
    v-model="selected" 
    @openNamesChange="changeOpen"
    @select="changeSelect"
  >
    <n-menu-item title="num1" name="num1"></n-menu-item>
    <n-menu-item title="num2" name="num2"></n-menu-item>
    <n-menu-item title="num3" name="num3"></n-menu-item>
    <n-submenu title="subMenu" name="subMenu">
      <n-menu-item title="sub1" name="sub1"></n-menu-item>
    </n-submenu>
    <n-submenu title="subMenu2" name="subMenu2">
      <n-submenu title="subMenu22" name="subMenu22">
        <n-menu-item title="sub222" name="sub222"></n-menu-item>
      </n-submenu>
    </n-submenu>
    <n-submenu title="subMenu3" name="subMenu3">
      <n-menu-item title="sub1" name="sub8"></n-menu-item>
      <n-menu-item title="sub1" name="sub6"></n-menu-item>
      <n-menu-item title="sub1" name="sub7"></n-menu-item>
    </n-submenu>
  </n-menu>
</div>

```
```js
export default {
  data () {
    return {
      selected: 'sub1',
    }
  },
  methods: {
    changeOpen (names) {
      console.log('names', names)
    },
    changeSelect (val) {
      console.log('changeSelect', val)
    }
  }
};
```