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