Navigation Menu
There are numerous links in header and if we write whole code in html then number of lines will increase a lot. So to prevent that we have created a json for the header links so that we can loop through the array links and render our links accordingly.
You can find Header.tsx on the following path: "src\data\layout\Header.tsx"
Making changes in Navbar.
export const MenuItem: MenuItemType[] = [
{
title: "Home",
type: "sub",
active: false,
megaMenuImage: true,
children: [
{
title: "Car Minimal Demo",
image: "other/menu/1.jpg",
path: routes.Home.CarDemo1,
type: "link",
},
{
title: "Car Minimal Demo",
image: "other/menu/2.jpg",
path: routes.Home.CarDemo2,
type: "link",
},
{
title: "Job Minimal Demo",
image: "other/menu/3.jpg",
path: routes.Home.JobDemo1,
type: "link",
},
{
title: "Job Minimal Demo",
image: "other/menu/5.jpg",
path: routes.Home.JobDemo2,
type: "link",
},
{
title: "Job Minimal Demo",
image: "other/menu/4.jpg",
path: routes.Home.JobDemo3,
type: "link",
},
{
title: "Property Minimal Demo",
image: "other/menu/6.jpg",
path: routes.Home.PropertyDemo1,
type: "link",
},
{
title: "Property Minimal Demo",
image: "other/menu/7.jpg",
path: routes.Home.PropertyDemo2,
type: "link",
},
{
title: "Coming Soon",
image: "other/menu/8.jpg",
type: "link",
},
],
},
]
If you need to modify anything in the already made navbar you have to make changes in this file src\data\layout\Header.tsx
Adding new LinksLets say you want to add a new link in the navigation bar, then you can do that by following the below given steps.
Step 1: add a new object in the array of navLinks containing the title, type, megaMenu, level and children (if any) as the keys to that object. Make sure that you provide the proper path in the Header.tsx file or else page won't render as the website won't be able to find the correct page for that path.