Navigation

1. Components and BackEnd Versions

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: "calendar",
    label: "Calendar",
    icon: "bi bi-calendar-week",
    link: "/calendar",                                        
}

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: "products",
    label: "Products",
    icon: "bi bi-box-seam",
    link: "/#",
    click: function (e: any) {
        e.preventDefault();
        setIsEcommerce(!isEcommerce);
        setIscurrentState('Ecommerce');
        updateIconSidebar(e);
    },
    stateVariables: isEcommerce,
    subItems: [
        {
            id: "listview",
            label: "List View",
            link: "/products-list",
            parentId: "products",
        },
        {
            id: "gridview",
            label: "Grid View",
            link: "/products-grid",
            parentId: "products",
        },
        {
            id: "overview",
            label: "Overview",
            link: "/product-overview",
            parentId: "products",
        },
        {
            id: "createproduct",
            label: "Create Product",
            link: "/product-create",
            parentId: "products",
        },
        {
            id: "categories",
            label: "Categories",
            link: "/categories",
            parentId: "products",
        },
        {
            id: "subcategories",
            label: "Sub Categories",
            link: "/sub-categories",
            parentId: "products",
        },
    ],
}

2. FrontEnd Version

you can easily update/add navigation menu items navigated in src/Layout/Header.tsx.

How to add Single Menu Item ?

Add following code in <ul> tag.

<li className="nav-item">
    <Link to="/dashboard" className="nav-link">{props.t('Dashboard')}</Link>
</li>

How to add Nested Menu Item ?

Add following code in <ul> tag.

<li> 
    <Link className="nav-link dropdown-toggle" to="/#" aria-expanded="false">{props.t('Pages')}</Link>
    <ul className="dropdown-menu dropdown-menu-md dropdown-menu-center dropdown-menu-list submenu">
        <li className="nav-item">
            <Link to='/pages-categories' className="nav-link">{props.t('Categories')}</Link>
        </li>                                  
    </ul>
</li>