Menu Structure Documentation

Description

A modern responsive gradient menu.

Menu metadata

menu-settings.config.ts would look like this

        
            
export interface MenuItem {
    title: string;
    icon: string;
    page: string;
    isExternalLink?: boolean;
    issupportExternalLink?: boolean;
    isStarterkitExternalLink?: boolean;
    badge: { type: string, value: string };
    submenu: {
        items: Partial[];
    };
    section: string;
}
    
export interface MenuConfig {
    horizontal_menu: {
        items: Partial[]
    };
    vertical_menu: {
        items: Partial[]
    };
    }
export const MenuSettingsConfig: MenuConfig = {
 vertical_menu: {
    items: [
    {
        title: 'Dashboard',
        icon: 'la la-home',
        page: 'null',
        badge: { type: 'badge-info', value: '12' },
        submenu: {
        items: [
           {
            title: 'Sales',
            icon: 'la la-dollar',
            page: '/dashboard/sales'
            },
            {
            title: 'Ecommerce',
            icon: 'la la-cart-plus',
            page: '/dashboard/ecommerce'
            }
        ]
        }
    },
  ]
}

Menu Params:

Param	Description
path	the route to put in `routerLink`
title	The name shown in the navigation menu
icon	the material icon to be used
class	Class will be ‘’ if it is a child menu and also if it does not have any child menu else value will be `has-sub`
badge	Text that you want to display on badge.value can be ‘’ as well in case you don't want to display badge.
badgeClass	Class will be either ‘’ if there is no badge or you can provide css class for badge.
isExternalLink	If you want to navigate to external link value will be `true` else it will be `false`
issupportExternalLink	If you want to navigate to issupportExternalLink link value will be `true` else it will be `false`
isStarterkitExternalLink	If you want to navigate to isStarterkitExternalLink link value will be `true` else it will be `false`
submenu	Value will be [] if there is no sub menu for that menu or you can provide submenu item, if any.

Menu config

For adding new menu item please change menu-settings.config.ts. would look like this

        
export const MenuSettingsConfig: MenuConfig = [
    {
        path: '', title: 'Dashboard', icon: 'la-home', class: 'has-sub', badge: '2', badgeClass: 'badge-info', isExternalLink: false, submenu: [ ]
    }
];

To create a dropdown menu with sub-items.

        
export const MenuSettingsConfig: MenuConfig = [
    {
        path: '', title: 'Dashboard', icon: 'la-home', class: 'has-sub', badge: '2', badgeClass: 'badge-info', isExternalLink: false, submenu: [
           { path: '/dashboard/sales', title: 'Sales', icon: '', class: '', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
           { path: '/dashboard/ecommerce', title: 'Ecommerce', icon: '', class: '', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
           
           ]
    }
];

Menu Levels

Currently it supports 3 level menu.

        
export const MenuSettingsConfig: MenuConfig= [
    {
        path: '#', title: 'Menu Levels', icon: 'ft-align-left', class: 'has-sub', badge: '1', badgeClass: 'badge badge-pill badge-danger float-right mr-1 mt-1', isExternalLink: false,
        submenu: [
            { path: '#', title: 'Second Level', icon: '', class: 'second-level', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
            {
                path: '#', title: 'Second Level Child', icon: '', class: 'has-sub', badge: '', badgeClass: '', isExternalLink: false,
                submenu: [
                    { path: '#', title: 'Third Level 1.1', icon: '', class: 'third-level', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
                    { path: '#', title: 'Third Level 1.2', icon: '', class: 'third-level', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
                ]
            },
        ]
    },
];

Refer following link for usage:

Type	URL
Template Page	https://modernadmin.evolvision.com/dashboard/sales