admin

Please wait...

chrome_reader_mode 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;
    icon: string;
    class: string;
    groupTitle: boolean;
    submenu: RouteInfo[];
  }
routes.json
                                    
{
    "routes": [
	 {
        path: '',
        title: 'Home',
        icon: 'fas fa-tachometer-alt',
        class: 'menu-toggle',
        groupTitle: false,
        submenu: [
        {
            path: 'dashboard/main',
            title: 'Dashboard 1',
            icon: '',
            class: 'ml-menu',
            groupTitle: false,
            submenu: []
          },
          {
            path: 'dashboard/dashboard2',
            title: 'Dashboard 2',
            icon: '',
            class: 'ml-menu',
            groupTitle: false,
            submenu: []
          },
        ]
    },
    {
        path: 'advance-table',
        title: 'Advance Table',
        icon: 'fab fa-envira',
        class: '',
        groupTitle: false,
        submenu: []
    },
	 ......
    ];
}

Single Menu Setting

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

                                    
{
    path: 'advance-table',
    title: 'Advance Table',
    icon: 'fab fa-envira',
    class: '',
    groupTitle: false,
    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',
    icon: 'fas fa-angle-double-down',
    class: 'menu-toggle',
    groupTitle: false,
    submenu: [
        {
        path: '/multilevel/first1',
        title: 'First',
        icon: '',
        class: 'ml-menu',
        groupTitle: false,
        submenu: []
        },
        {
        path: '/',
        title: 'Second',
        icon: '',
        class: 'ml-sub-menu',
        groupTitle: false,
        submenu: [
            {
            path: '/multilevel/secondlevel/second1',
            title: 'Second 1',
            icon: '',
            class: 'ml-sub-sub-menu',
            groupTitle: false,
            submenu: []
            },
            {
            path: '/multilevel/secondlevel/second2',
            title: 'Second 2',
            icon: '',
            class: 'ml-sub-sub-menu',
            groupTitle: false,
            submenu: []
            }
        ]
        },
        {
        path: '/multilevel/first3',
        title: 'Third',
        icon: '',
        class: 'ml-menu',
        groupTitle: false,
        submenu: []
        }
    ]
}