# Menu Settings

The Menu service can return a Menu array, and the navigation of the application is generated dynamically based on the Menu data and associated with the route.

The route path of each menu item is composed of the parent and child `route`. Following is the type definition for the menu.

```typescript
export interface MenuTag {
  color: string; // Background Color
  value: string;
}

export interface MenuChildrenItem {
  route: string;
  name: string;
  type: 'link' | 'sub' | 'extLink' | 'extTabLink';
  children?: MenuChildrenItem[];
}

export interface Menu {
  route: string;
  name: string;
  type: 'link' | 'sub' | 'extLink' | 'extTabLink';
  icon: string;
  label?: MenuTag;
  badge?: MenuTag;
  children?: MenuChildrenItem[];
}
```

## Route Path

Take the two levels menu as an example: the `route` of the first-level item represents the `path` of the lazy module, and the `route` of the second-level item represents the `path` of the business component. So the final routing path of the business page is `level_1_route/level_2_route`. In a few cases, the three levels menu may be used.

Here is an example of a three levels menu. If you use the three levels menu, the `route` of the second-level item is allowed to be empty, and the final routing path is `material/autocomplete`. However, there is a problem in this case where the routing path cannot be associated with the third-level of the menu.

```javascript
{
  "menu": [
    {
      "route": "material",
      "name": "Material",
      "type": "sub",
      "icon": "favorite",
      "children": [
        {
          "route": "",
          "name": "Form Controls",
          "type": "sub",
          "children": [
            {
              "route": "autocomplete",
              "name": "Autocomplete",
              "type": "link"
            }
          ]
        }
      ]
    }
  ]
}
```

Regarding the three levels menu, you can take a look at the routing path of the demo example. Open the following two paths respectively to check the menu changes:

* <https://ng-matero.github.io/ng-matero/material/autocomplete>
* <https://ng-matero.github.io/ng-matero/material/data-table/paginator>

## Label Color

Label color needs to be filled with a legal Material color value, such as `red-500`, `blue-900`, see [colors](https://nzbin.gitbook.io/ng-matero/theming/colors) for details.

## API

### MenuService

| Method          | Parameter            | Return   | Description            |
| --------------- | -------------------- | -------- | ---------------------- |
| getAll          | -                    | `Menu[]` | get menu               |
| set             | `menu: Menu[]`       | `Menu[]` | set menu               |
| add             | `menu: Menu`         | -        | add a menu item        |
| getMenuItemName | `stateArr: string[]` | `string` | get the menu item name |
| getMenuLevel    | `stateArr: string[]` | `string` | get menu levels        |