admin

Please wait...

Sidebar Menu Customization

For customize sidebar menu you have to deal with just routes.json, sidebar.metadata.ts files. You can find files in apps/layout/sidebar directory, Code sample for both sample is:

sidebar.metadata.ts
                            
// Sidebar route metadata
export interface RouteInfo {
    path: string;
    title: string;
    iconType: string;
    icon: string;
    class: string;
    groupTitle: boolean;
    badge: string;
    badgeClass: string;
    submenu: RouteInfo[];
}
                         
                            

routes.json
                            
{
    "routes": [
        {
            path: '',
            title: 'Home',
            iconType: 'feather',
            icon: 'monitor',
            class: 'menu-toggle',
            groupTitle: false,
            badge: '',
            badgeClass: '',
            submenu: [
            {
                path: '/dashboard/main',
                title: 'Dashboard 1',
                iconType: '',
                icon: '',
                class: 'ml-menu',
                groupTitle: false,
                badge: '',
                badgeClass: '',
                submenu: [],
            },
            {
                path: '/dashboard/dashboard2',
                title: 'Dashboard 2',
                iconType: '',
                icon: '',
                class: 'ml-menu',
                groupTitle: false,
                badge: '',
                badgeClass: '',
                submenu: [],
            },
            ],
        },
        {
            path: 'advance-table',
            title: 'Advance Tables',
            iconType: 'feather',
            icon: 'trello',
            class: '',
            groupTitle: false,
            badge: '',
            badgeClass: '',
            submenu: [],
        },
            ......
        ];
}
                            
                            
                           

Single Menu Setting

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

                            
{
    path: 'advance-table',
    title: 'Advance Tables',
    iconType: 'feather',
    icon: 'trello',
    class: '',
    groupTitle: false,
    badge: '',
    badgeClass: '',
    submenu: [],
},                      
                            
                            

Multilevel Dropdown Menu Setting

For set Three level dropdown menu you have to write following code in routes.json file

                            
{
    path: '',
    title: 'Multi level Menu',
    iconType: 'feather',
    icon: 'chevrons-down',
    class: 'menu-toggle',
    groupTitle: false,
    badge: '',
    badgeClass: '',
    submenu: [
        {
        path: '/multilevel/first1',
        title: 'First',
        iconType: '',
        icon: '',
        class: 'ml-menu',
        groupTitle: false,
        badge: '',
        badgeClass: '',
        submenu: [],
        },
        {
        path: '/',
        title: 'Second',
        iconType: '',
        icon: '',
        class: 'ml-sub-menu',
        groupTitle: false,
        badge: '',
        badgeClass: '',
        submenu: [
            {
            path: '/multilevel/secondlevel/second1',
            title: 'Second 1',
            iconType: '',
            icon: '',
            class: '',
            groupTitle: false,
            badge: '',
            badgeClass: '',
            submenu: [],
            },
            {
            path: '/multilevel/secondlevel/second2',
            title: 'Second 2',
            iconType: '',
            icon: '',
            class: '',
            groupTitle: false,
            badge: '',
            badgeClass: '',
            submenu: [],
            },
        ],
        },
        {
        path: '/multilevel/first3',
        title: 'Third',
        iconType: '',
        icon: '',
        class: 'ml-menu',
        groupTitle: false,
        badge: '',
        badgeClass: '',
        submenu: [],
        },
    ],
    },