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',
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: '',
title: 'Home',
iconType: 'material-icons-two-tone',
icon: 'home',
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: 'Advenec Tables',
iconType: 'material-icons-two-tone',
icon: 'table_view',
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: 'Advenec Tables',
iconType: 'material-icons-two-tone',
icon: 'table_view',
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: 'material-icons-two-tone',
icon: 'slideshow',
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: 'ml-menu2',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
{
path: '/',
title: 'Second 2',
iconType: '',
icon: '',
class: 'ml-sub-menu2',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [
{
path: '/multilevel/thirdlevel/third1',
title: 'third 1',
iconType: '',
icon: '',
class: 'ml-menu3',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
],
},
],
},
{
path: '/multilevel/first3',
title: 'Third',
iconType: '',
icon: '',
class: 'ml-menu',
groupTitle: false,
badge: '',
badgeClass: '',
submenu: [],
},
],
}