0

I would like to create multi level navigation or tree view on SPO from Site Pages. But from the Global navigation or site navigation, only two level is possible like

 Parent1
     --Child1
     --Child2
     Parent2
       --Child1
       --Child2

But what i want is like below structure, if it possible spfx please suggest with reference

Example1:

Parent
 --Child1
 --Child2

Example2:

Parent1
 --Child1
 --Child2
 Parent2
   --Child1
   --Child2

Example3:

Parent1
 --Child1
 --Child2
 Parent2
   --Child1
   --Child2
  Parent3
    --Child1
    --Child2

Nested Array:

if (v["ParentId"] == null) {
      const tree: ITreeItem = {
        key: v.Id,
        label: v["Title"],
        data: v["Link"],
        children: []
      }
   const tree1: ITreeItem = {
        key: v.Id,
        label: v["Title"],
        data: v["Link"],
        children: []
      }
   const tree2: ITreeItem = {
        key: v.Id,
        label: v["Title"],
        data: v["Link"],
        children: []
      }
      treearr.push(tree);
    }
    else {
      const tree: ITreeItem = {
        key: v.Id,
        label: v["Title"],
        data: v["Link"]
      }
4
  • Check this SPFx extension sample & let me know if it helps: React Menu Footer Classic Modern Nov 23 at 11:25
  • Is it possible to have multi level like what i have described, and also found one sample, but how to make recursive navigation. Like above example with multi level on this spfx ravichandran.blog/2020/05/14/…
    – striker92
    Nov 23 at 11:31
  • Definitely possible with custom coding. You just need to add one nested level of menu items inside links array. In the link you shared there are 2 levels in links array (this.state.TreeLinks). Similary, you can try adding 3 levels of links in this data array. Nov 23 at 11:36
  • I have updated the main question, is it something like that ?
    – striker92
    Nov 23 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.