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: []
}
]
}