How to create navigation dynamically using react js in SPFX in SharePoint online.

Question

How create the navigation dynamically based on the pageName using react js in SPFX in sharepoint online

Answer 1

Please elaborate your requirement using examples.

---

Please remember to up-vote & mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

Answer 2

I want create navigation and it should change based on the page and i will get the information from list.

Ex:

If i am in "Parent1" page the navigation similar to below

Parent1  

          --- child1

                    -- child2

If i am in "child1" page the navigation similar to below

 child1

            --- child2

                    --- child3

If i am in "child2" page the navigation similar to below

child2

            --- child3

                    --- child4

As mentioned in above the navigation change based on the pagename. Based on the pageName it checks in the list and get 2 levels of child nodes and show.

It should be dynamically done by using SPFX.

I developed this by using poweshell script but it will not change based on the pagename.

Answer 3

Hi Rajesh,

If you want to create navigation base on the custom list data, here is a solution for your reference.

spfx global navigation

If you want to load data base on pageName, we can add new column in the list, and get data base on the pageName in the solution above.

Best Regards,

Dennis

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 4

Hi Dennis,

What is max number of levels in the menu navigation?

Answer 5

Hi Dennis,

My actual requirement i have a list similar to below.

When i apply the below powershell script 

===============================================================

$SiteUrl="https://abc.sharepoint.com/sites/def"
$Username = "[e-mail]" 
$Password = "Password" 
$listName = "SPList"


#region Credentials 
[SecureString]$SecurePass = ConvertTo-SecureString $Password -AsPlainText -Force 
[System.Management.Automation.PSCredential]$PSCredentials = New-Object System.Management.Automation.PSCredential($Username, $SecurePass) 
#endregion Credentials


Connect-PnPOnline -Url $siteURL -Credentials $PSCredentials
function RetrieveListItemByQuery($parentId2,$file10){  

$listItems2= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId2</Value></Eq></Where></Query></View>" 
   foreach($listItem1 in $listItems2){  
      if(!$listitem1["isDeletedFromHopex"]){
       $pageUrl1=$SiteUrl+"/sitepages/"+$listitem1["Id"]+".aspx"
       $file5= Add-PnPNavigationNode -Title  $listitem1["ShortName"] -Url  $pageUrl -Location "QuickLaunch"  -Parent $file10.Id 
       Write-Host "Title : " $file10.Id
       Write-Host "Title : "$listitem1["ShortName"]
       
       }
       RetrieveListItemByQuery $listItem1["Id"] $file5  
       
    }  
}  
Get-PnPNavigationNode -Location QuickLaunch | Remove-PnPNavigationNode -Force

$parentId="11"
#$listName = "MLVGMSPROCESS"
$file4=Add-PnPNavigationNode -Title "Processes" -Url $SiteUrl -Location "QuickLaunch"
$listItems= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId</Value></Eq></Where></Query></View>" 
   foreach($listItem in $listItems){ 
     
      $pageUrl=$SiteUrl+"/sitepages/"+$listitem["Id"]+".aspx"
      if(!$listitem["isDeletedFromHopex"]){
      $file3= Add-PnPNavigationNode -Title  $listitem["ShortName"] -Url  $pageUrl -Location "TopNavigationBar"  -Parent $file4.Id
      $childLevel1=$file3
     
      Write-Host "Title : " $file3.Id
       RetrieveListItemByQuery $listItem["Id"] $file3 
       }
          
            
       
       
    }  
 

================================================================

Navigation looks like as similar

========================================



==========================================

 If i change the powershell script as shown in below 

===========================================

$SiteUrl="https://abc.sharepoint.com/sites/def"
$Username = "[e-mail]" 
$Password = "Password" 
$listName = "SPList"


#region Credentials 
[SecureString]$SecurePass = ConvertTo-SecureString $Password -AsPlainText -Force 
[System.Management.Automation.PSCredential]$PSCredentials = New-Object System.Management.Automation.PSCredential($Username, $SecurePass) 
#endregion Credentials


Connect-PnPOnline -Url $siteURL -Credentials $PSCredentials
function RetrieveListItemByQuery($parentId2,$file10){  

$listItems2= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId2</Value></Eq></Where></Query></View>" 
   foreach($listItem1 in $listItems2){  
      if(!$listitem1["isDeletedFromHopex"]){
       $pageUrl1=$SiteUrl+"/sitepages/"+$listitem1["Id"]+".aspx"
       $file5= Add-PnPNavigationNode -Title  $listitem1["ShortName"] -Url  $SiteUrl -Location "QuickLaunch"  -Parent $childLevel1.Id 
       Write-Host "Title : " $file10.Id
       Write-Host "Title : "$listitem1["ShortName"]
       
       }
       RetrieveListItemByQuery $listItem1["Id"] $file5  
       
    }  
}  
Get-PnPNavigationNode -Location QuickLaunch | Remove-PnPNavigationNode -Force

$parentId="11"
#$listName = "MLVGMSPROCESS"
$file4=Add-PnPNavigationNode -Title "Te" -Url $SiteUrl -Location "QuickLaunch"
$listItems= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId</Value></Eq></Where></Query></View>" 
   foreach($listItem in $listItems){ 
     
      $pageUrl=$SiteUrl+"/sitepages/"+$listitem["Id"]+".aspx"
      if(!$listitem["isDeletedFromHopex"]){
      $file3= Add-PnPNavigationNode -Title  $listitem["ShortName"] -Url  $SiteUrl -Location "TopNavigationBar"  -Parent $file4.Id
      $childLevel1=$file3
     
      Write-Host "Title : " $file3.Id
       RetrieveListItemByQuery $listItem["Id"] $file3 
       }
          
            
       
       
    }  
 

=========================================

Navigation Looks below:

===========================================

===========================================

But how can i get all the sub levels means 

 Under "Mobile" node i need see childnodes of "Android" $ "IOS"

It should be something the total navigation looks something as shown in below:

Technologies

                    --- Software

                                            --- SharePoint

                                                             ---- Office365

                                                             ---- SP2019

                                            ---- JAVA

                                            ----- Mobile

                                                              ---- Android

                                                               ----- IOS

                   --- Marketing

                   ---- Automobile

                                             --- Car

                                     

Answer 6

Hi,

By default, the MaximumDynamicDisplayLevels set to 2.

We can open the master and find "TopNavigationMenu", then modify MaximumDynamicDisplayLevels set more than 2.

<SharePoint:AspMenu ID="TopNavigationMenu" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&lt;%$Resources:wss,navigation_accesskey%&gt;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="3" SkipLinkText="" />

Best Regards,

Dennis

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 7

But how can we modify without using SharePoint designer?

Answer 8

hi Dennis,

Thanks for your reply.

I changed my master page as shown in below

======================================

<SharePoint:AspMenu
id="V4QuickLaunchMenu"
runat="server"
EnableViewState="false"
DataSourceId="QuickLaunchSiteMap"
UseSimpleRendering="true"
Orientation="Horizontal"
StaticDisplayLevels="6"
DynamicHorizontalOffset="0"
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="6"
StaticPopoutImageUrl="/_layouts/15/images/menudark.gif?rev=47"
StaticPopoutImageTextFormatString=""
SkipLinkText=""
StaticSubMenuIndent="0"
/>

=========================================

After uploading that master page i executed the below script

==============================================

                                                                                            

$SiteUrl="https://abc.sharepoint.com/sites/gef"
$Username = "[e-mail]" 
$Password = "Password" 
$listName = "sampleNavList"
$childLevel1=""
$childLevel2=""

#region Credentials 
[SecureString]$SecurePass = ConvertTo-SecureString $Password -AsPlainText -Force 
[System.Management.Automation.PSCredential]$PSCredentials = New-Object System.Management.Automation.PSCredential($Username, $SecurePass) 
#endregion Credentials


#Creating SharePoint Modern Pages by taking reference of Page Template


Connect-PnPOnline -Url $siteURL -Credentials $PSCredentials
function RetrieveListItemByQuery($parentId2,$file10){  

$listItems2= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId2</Value></Eq></Where></Query></View>" 
   foreach($listItem1 in $listItems2){  
      if(!$listitem1["isDeletedFromHopex"]){
       $pageUrl1=$SiteUrl+"/sitepages/"+$listitem1["ChildId"]+".aspx"
       $file5= Add-PnPNavigationNode -Title  $listitem1["Title"] -Url  $SiteUrl -Location "QuickLaunch"  -Parent $file10.Id 
       Write-Host "Title : " $file10.Id
       Write-Host "Title : "$listitem1["Title"]
       RetrieveListItemByQuery $listItem1["ChildId"] $file5


        #Write-Host "Title : " $listItem1["HexId"]  
        #Write-Host "Title : " $listItem1["ShortName"]  
       }


    }  
}  
Get-PnPNavigationNode -Location QuickLaunch | Remove-PnPNavigationNode -Force

$parentId="11"

$file4=Add-PnPNavigationNode -Title "Technologies" -Url $SiteUrl -Location "QuickLaunch"
$listItems= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId</Value></Eq></Where></Query></View>" 
   foreach($listItem in $listItems){ 

      $pageUrl=$SiteUrl+"/sitepages/"+$listitem["ChildId"]+".aspx"
      if(!$listitem["isDeletedFromHopex"]){
      $file3= Add-PnPNavigationNode -Title  $listitem["Title"] -Url  $SiteUrl -Location "TopNavigationBar"  -Parent $file4.Id
      $childLevel1=$file3

      Write-Host "Title : " $file3.Id
       RetrieveListItemByQuery $listItem["ChildId"] $file3 
       }


        #Write-Host "ParentId : " $parentId




    }  

=================================

Navigation menu looks as shown in below

===================================

=======================================================================

Now i can see only 2 levels but if i "Edit" the navigation manually adding and other node as shown in below

After clicking the "save" button i can see the navigation as below and it showing as many levels we want

    If i remove the link "t" link and save it shows only 2 levels.

 How can i achieve multiple levels with out adding the another link "t" manually as shown in above

Answer 9

I am showing the 'N' level of navigation based on the list as shown in below.

i am running the below script to add the navigation dynamically

===============================================

$SiteUrl="https://abc.sharepoint.com/sites/demo1"
$Username = "[e-mail]" 
$Password = "Passord1" 
$listName = "sampleNavList"
$childLevel1=""
$childLevel2=""

#region Credentials 
[SecureString]$SecurePass = ConvertTo-SecureString $Password -AsPlainText -Force 
[System.Management.Automation.PSCredential]$PSCredentials = New-Object System.Management.Automation.PSCredential($Username, $SecurePass) 
#endregion Credentials


#Creating SharePoint Modern Pages by taking reference of Page Template


Connect-PnPOnline -Url $siteURL -Credentials $PSCredentials
function RetrieveListItemByQuery($parentId2,$file10){  

$listItems2= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId2</Value></Eq></Where></Query></View>" 
   foreach($listItem1 in $listItems2){  
      if(!$listitem1["isDeletedFromHopex"]){
       $pageUrl1=$SiteUrl+"/sitepages/"+$listitem1["ChildId"]+".aspx"
       $file5= Add-PnPNavigationNode -Title  $listitem1["Title"] -Url  $SiteUrl -Location "QuickLaunch"  -Parent $file10.Id 
       Write-Host "Title : " $file10.Id
       Write-Host "Title : "$listitem1["Title"]
       RetrieveListItemByQuery $listItem1["ChildId"] $file5
          
        
        #Write-Host "Title : " $listItem1["HexId"]  
        #Write-Host "Title : " $listItem1["ShortName"]  
       }
         
       
    }  
}  
Get-PnPNavigationNode -Location QuickLaunch | Remove-PnPNavigationNode -Force

$parentId="11"

$file4=Add-PnPNavigationNode -Title "Technologies" -Url $SiteUrl -Location "QuickLaunch"
$listItems= Get-PnPListItem -List $listName -Query "<View><Query><Where><Eq><FieldRef Name='ParentId'/><Value Type='Text'>$parentId</Value></Eq></Where></Query></View>" 
   foreach($listItem in $listItems){ 
     
      $pageUrl=$SiteUrl+"/sitepages/"+$listitem["ChildId"]+".aspx"
      if(!$listitem["isDeletedFromHopex"]){
      $file3= Add-PnPNavigationNode -Title  $listitem["Title"] -Url  $SiteUrl -Location "TopNavigationBar"  -Parent $file4.Id
      $childLevel1=$file3
     
      Write-Host "Title : " $file3.Id
       RetrieveListItemByQuery $listItem["ChildId"] $file3 
       }
          
        
        #Write-Host "ParentId : " $parentId
        
       
       
       
    }  
 

===============================================

After executing the above script the navigation shown below

------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------I am not able to get the all the levels but when manually add the new node another link and save i am able to see all the 'N' levels

-------------------------------------------------------------------------------------------------------

--------------------------------------------------------------

-----------------------------------------------------

------------------------------------------------------------

But when i refresh the page the navigation coming back to a shown in below

-----------------------------------------------------------------------------

-----------------------------------------------------------------------------

How can i get all the 'N' level of navigation after refreshing the page also

Answer 10

Hi Rajesh,

We don't need add the another link 't' manually to make the custom navigation works. It seems the cache issue, please close the browser and open the SharePoint site again, and check if it works.

Best Regards,

Dennis

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 11

I tried it and open in another system but it still showing only 2 levels of navigation.

My site is SharePoint modern site.

Answer 12

Can you please try the same thing on your local SharePoint Modern Site?

Answer 13

Hi Rajesh,

It working fine in my SharePoint online test environment.

Please try to install the latest PnP powershell.

Install-Module SharePointPnPPowerShellOnline

https://www.powershellgallery.com/packages/SharePointPnPPowerShellOnline/3.14.1910.0

Best Regards,

Dennis

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 14

Its already installed in my machine.

Answer 15

Hi,

Your current PnP powershell version is 3.12.1908.1.

Using command below to install the latest version 3.14.1910.0.

Install-Module SharePointPnPPowerShellOnline -Force

Best Regards,

Dennis

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 16

I upgraded as mentioned above but still i am not able to get more than 2 levels?

Any changes i need to do w.r.to SharePoint site any features needs to be activated?

Is this works in modern site?

Answer 17

Hi Rajesh,

Did you solve the issue?

Please try to use the PnP PowerShell below to check if it works in your environment.

$SiteURL = "https://tenant.sharepoint.com/sites/dennis"
#Get Credentials to connect
$Cred = Get-Credential
Connect-PnPOnline -Url $SiteURL -Credentials $Cred
$node=Add-PnPNavigationNode -Title "Menu1" -Url "https://www.bing.com" -Location "TopNavigationBar" -External
$childNode1=Add-PnPNavigationNode -Title "Menu1.1" -Url "https://www.bing.com" -Location "TopNavigationBar" -External -Parent $node.Id
$childNode1_1=Add-PnPNavigationNode -Title "Menu1.1.1" -Url "https://www.bing.com" -Location "TopNavigationBar" -External -Parent $childNode1.Id
$childNode1_1_1=Add-PnPNavigationNode -Title "Menu1.1.1" -Url "https://www.bing.com" -Location "TopNavigationBar" -External -Parent $childNode1_1.Id

Best Regards,

Dennis

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 18

I tried the above script but still i got only 2 levels.

Did i miss anything?

Please find the below screenshot:

Answer 19

Hi Rajesh,

I change MaximumDynamicDisplayLevels to 5 in my master page using SharePoint designer 2013.

Best Regards,

Dennis

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 20

Hi Dennis,

How we can know current site master page?

I clicked on site settings --> composed looks --> there i find the current master page as olso.master as shown in below

--------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------

Then i open masterpage gallery : https://ms.sharepoint.com/sites/AC/_catalogs/masterpage/Forms/AllItems.aspx

there i found oslo.master as shown below:

------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------

From there i download the copy of 'oslo.master' to my local and open it 'notepad++' or visual studio and update the data as shown in below:

-----------------------------------------------------------------------------

<SharePoint:AspMenu
id="V4QuickLaunchMenu"
runat="server"
EnableViewState="false"
DataSourceId="QuickLaunchSiteMap"
UseSimpleRendering="true"
Orientation="Horizontal"
StaticDisplayLevels="6"
DynamicHorizontalOffset="0"
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="6"
StaticPopoutImageUrl="/_layouts/15/images/menudark.gif?rev=47"
StaticPopoutImageTextFormatString=""
SkipLinkText=""
StaticSubMenuIndent="0"
/>

------------------------------------------------------------

I save the file and uploaded to master page gallery  and published the major vesrion but still no change with respect to navigation.

Did i miss any steps?

Is it ok or not ok to update the data of .master in 'notepad++' or 'visual studio' ?

or anyother files i need to modify?

Answer 21

when i open the site in SharePoint designer i didnt see any master page option?

------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------

After clicking 'How do i customize the site master page' i got the below error

Answer 22

Hi Rajesh,

Please use site collection administrator to modify it.

And only change MaximumDynamicDisplayLevels to 5, the StaticDisplayLevels set 2.

Best Regards,

Dennis

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.