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.

For single menu you have to write following code in menu.json file

                            
{
    "menu": [
        {
        "route": "advance-table",
        "name": "advance-table",
        "type": "link",
        "icon": "trello"
        }
    ]
}
                                                     
                            
                            

---

Here is an example of a multi levels menu.

                            
{
    "menu": [
        {
        "route": "menu-level",
        "name": "menu-level",
        "type": "sub",
        "icon": "chevrons-down",
        "children": [
            {
            "route": "level-1-1",
            "name": "level-1-1",
            "type": "sub",
            "children": [
                {
                "route": "level-2-1",
                "name": "level-2-1",
                "type": "sub",
                "children": [
                    {
                    "route": "level-3-1",
                    "name": "level-3-1",
                    "type": "sub",
                    "children": [
                        {
                        "route": "level-4-1",
                        "name": "level-4-1",
                        "type": "link"
                        }
                    ]
                    }
                ]
                },
                {
                "route": "level-2-2",
                "name": "level-2-2",
                "type": "link"
                }
            ]
            },
            {
            "route": "level-1-2",
            "name": "level-1-2",
            "type": "link"
            }
        ]
        }
    ]
}
                                  
                            
                            

Label Color

Label color needs to be filled with a legal Material color value, such as red-500, blue-900.

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