Navigation
Navigation
You can change or customize the left side navigation very easily.
How to add new menu items/change menu items?
In order to add, change or remove menu items from the
left side navigation, simply edit in file Components/Common/Layout/LayoutMenuData.tsx
.
How to add Menu Title?
Add Menu label and isHeader property pass in the JSON object.
{
label: "Menu",
isHeader: true,
}
How to add Single Menu Item ?
Add Menu id, label, icon, link and click function(for collapse menu) property pass in the JSON object.
{
id: "widgets",
label: "Widgets",
icon: "bi bi-hdd-stack",
link: "/widgets",
click: function (e: any) {
e.preventDefault();
setIscurrentState('Widgets');
},
}
How to add Nested Menu Item ?
Add Menu id, label, icon, link, stateVariables, click function(for collapse menu) and ismainMenu property pass in the JSON object.
{
id: "pages",
label: "Pages",
icon: "bi bi-journal-medical",
link: "/#",
click: function (e: any) {
e.preventDefault();
setIsPages(!isPages);
setIscurrentState('Pages');
updateIconSidebar(e);
},
stateVariables: isPages,
subItems: [
{
id: "starter",
label: "Starter",
link: "/pages/starter",
parentId: "pages",
},
{
id: "profile",
label: "Profile",
link: "/#",
isChildItem: true,
click: function (e: any) {
e.preventDefault();
setIsProfile(!isProfile);
},
parentId: "pages",
stateVariables: isProfile,
childItems: [
{ id: 1, label: "Simple Page", link: "/pages/profile/page", parentId: "pages" },
{ id: 2, label: "Settings", link: "/pages/profile/settings", parentId: "pages" },
]
},
{ id: "team", label: "Team", link: "/pages/team", parentId: "pages" },
{ id: "timeline", label: "Timeline", link: "/pages/timeline", parentId: "pages" },
{ id: "faqs", label: "FAQs", link: "/pages/faqs", parentId: "pages" },
{ id: "pricing", label: "Pricing", link: "/pages/pricing", parentId: "pages" },
{ id: "maintenance", label: "Maintenance", link: "/pages/maintenance", parentId: "pages" },
{ id: "comingSoon", label: "Coming Soon", link: "/pages/coming-soon", parentId: "pages" },
{ id: "sitemap", label: "Sitemap", link: "/pages/sitemap", parentId: "pages" },
{ id: "searchResults", label: "Search Results", link: "/pages/search-results", parentId: "pages" },
],
}