# Menu ---- Menus typically have `Top Navigator` or `Side Navigator`, a menu list that provides navigation for the page. ## Top Navigator Set `mode` to `horizontal`. :::demo ```html Navigation One Navigation Two Submenu One Submenu Two Submenu Three Submenu Four Navigation Four ``` ::: ## Top Navigator (Multi-Level) Nested `Submenu` in `Submenu` can bi combined into multilevel menus. :::demo ```html Navigation One Navigation Two Submenu One Submenu Two Submenu Four Submenu Five Navigation Four ``` ::: ## Side Navigator Set `mode` to `vertical`. :::demo ```html Navigation One Navigation Two Submenu One Submenu Two Submenu Three Submenu Four Navigation Four ``` ::: ## Side Navigator (Multi-Level) :::demo ```html Navigation One Navigation Two Submenu One Submenu Two Submenu Three Submenu Four Submenu Five Submenu Six Submenu Eight Submenu Night ``` ::: ## Side Inline Navigator Set `mode` to `inline`. :::demo ```html Navigation One Navigation Two Submenu One Submenu Two Submenu Three Submenu Four Navigation Four Submenu Six Submenu Seven ``` ::: ## Collapsed Inline Navigator Set `inline-collapsed` property to open collapsed mode. Which means only one submenu can be expanded at the same time. :::demo ```html Submenu One Submenu Two Submenu Three Submenu Four Submenu One Submenu Two Submenu Three Submenu Four Submenu One Submenu Two Submenu Three Submenu Four Submenu One Submenu Two ``` ::: ## Themes There are two built-in themes: `light` and `dark`. The default value is `light`. :::demo ```html
Dark Light Inline Horizontal Vertical
Submenu Submenu One Submenu Two Submenu Three Submenu Four Submenu One Submenu Two Submenu Three Submenu Four Submenu One Submenu Two Submenu Three Submenu Four Submenu One Submenu Two ``` ::: ## Vue Router Integration Used together with `vue-router`. Set `router` property to `at-menu`, and Passed an `object` to `to` property. If you don't need a new history, add the `replace` property to `Menu Item`. :::demo ```html Breadcrumb Dropdown Menu Pagination ``` ::: ## Menu Props | Property | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | mode | the mode of Menu | String | `inline`, `horizontal`, `vertical` | `inline` | | theme | the theme of Menu | String | `light`, `dark` | `light` | | activeName | the name of actived item | String, Number | - | - | | router | whether to use `vue-router` | Boolean | - | false | | inlineCollapsed | enable collapsed mode | Boolean | - | false | | width | the width of Menu, only valid in `vertical` and `inline` mode | String | - | `240px` | ## Menu Events | Event Name | Description | Return Value | |---------- |-------------- |---------- | | on-select | Emitted when the menu item was clicked | name | ## MenuGroup Props | Property | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | title | the title of grouop | String | - | - | ## Submenu Props | Property | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | disabled | whether the Submenu is disabled | Boolean | - | false | | opened | whether to expand the submenu | Boolean | - | false | ## MenuItem Props | Property | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | name | the name of Menu Item | String / Number | - | - | | to | the object of `vue-router`, same as the `to` property in `vue-router` | String / Object | - | - | | replace | whether to add new history when using `to` | Boolean | - | false | | disabled | whether the MenuItem is disabled | Boolean | - | false |