# 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](/ng-matero/theming/colors.md) 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        |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nzbin.gitbook.io/ng-matero/theming/menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.