Navigation

In this page, you will find how to add/update navigation menu items.

Vertical Layout Menu

you can easily update/add navigation menu items in Vertical Layout navigated in src/Layout/VerticalLayout/SidebarData.js.

How to add Menu Title ?

Add Menu label and ismainMenu property pass in the JSON object.

{
  label: "Menu",
  ismainMenu: true,
},

How to add Single Menu Item ?

Add label, icon , url and arrow pass in the JSON object.

{
  label: "Calendar",
  icon: "mdi mdi-calendar-outline",
  isHasArrow: true,
  url: "/calendar",
},

How to add Nested Menu Item ?

Add following code in <ul> tag.

{
  label: "Email",
  icon: "mdi mdi-email-outline",
  subItem: [
      { sublabel: "Inbox", link: "/inbox" },
      { sublabel: "Read Email", link: "/read-email" },
      { sublabel: "Email Compose", link: "/compose-email" },
  ],
},

Horizontal Layout Menu

you can easily update/add navigation menu items in Vertical Layout navigated in src/Layout/HorizontalLayout/Navdata.js.

How to add Single Menu Item ?

Add following code in <ul> tag.

{
  label: "Calendar",
  url: "/calendar",
},

How to add Nested Menu Item ?

Add following code in <ul> tag.

{
  label: "Email",
  staclick: function () {
  setemail(!email);
  setui(false);
  setcomponent(false);
  setpages(false);
},
  subState: email,
  subItem: [
    { link: "/inbox", title: "Inbox" },
    { link: "/read-email", title: "Read Email" },
    { link: "/compose-email", title: "Compose Email" },
  ],
},