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 src/Layouts/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: ,
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: ,
link: "/#",
click: function (e: any) {
e.preventDefault();
setIsPages(!isPages);
setIsCurrentState('Pages');
},
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", 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: "searchResults", label: "Search Results", link: "/pages-search-results", parentId: "pages" }
],
}