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" },
    ],
}
© Hybrix.
Design & Develop by Themesbrand