Navigation

Modifying or personalizing the navigation on the left side is straightforward and adaptable.

How to add new menu items/change menu items?

To modify the left side navigation menu items in JavaScript, you can easily achieve this by making edits within the src/Layouts/LayoutMenuData.js file. For those using TypeScript, the equivalent file to modify would be src/Layouts/LayoutMenuData.ts file. In these respective files, you can effortlessly add, modify, or remove menu items to tailor the navigation according to your requirements.

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: "ri-honour-line",
  link: "/widgets",
  click: function (e) {
  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: "dashboard",
  label: "Dashboards",
  icon: "ri-dashboard-2-line",
  link: "/#",
  stateVariables: isDashboard,
  click: function (e) {
  e.preventDefault();
  setIsDashboard(!isDashboard);
  setIscurrentState('Dashboard');
  updateIconSidebar(e);
  },
  subItems: [
      {
      id: "analytics",
      label: "Analytics",
      link: "/dashboard-analytics",
      parentId: "dashboard",
      },
      {
      id: "crm",
      label: "CRM",
      link: "/dashboard-crm",
      parentId: "dashboard",
      },
      {
      id: "ecommerce",
      label: "Ecommerce",
      link: "/dashboard",
      parentId: "dashboard",
      },
      {
      id: "crypto",
      label: "Crypto",
      link: "/dashboard-crypto",
      parentId: "dashboard",
      },
      {
      id: "projects",
      label: "Projects",
      link: "/dashboard-projects",
      parentId: "dashboard",
      },
      {
  ],
}