How To Open Quick Launch Link In New Tab In SharePoint Programmatically

This article will teach you how to open a quick launch link in a new tab for SharePoint. Commonly, I get this question from many of the developers about how to open a link from quick launch page in new tab. 

The Quick Launch contains links to select the settings, lists, and libraries of the current site or site collection. Also, this page can optionally contain links to subsites and pages of the current site. We use the Quick Launch section to navigate between different areas of your site and to access things  immediately, like a favorite button.

Below are the steps to open quick launch link in new tab for SharePoint online publishing site.

For testing, open publishing site in Google Chrome or any other browser of your choice.

Press F12 and click on "pick an element of the page" and move to the main logo page of SharePoint.

Once you clicked on the link below, now copy the document element name for using in the below code.

Now, we can paste SharePoint element to the highlighted path:

Note

The default left navigation element's name will be the same as below.

  1. var a = document.getElementById('ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager').getElementsByTagName('a');  
  2. for (var i = 0; i < a.length; i++)  
  3. {  
  4.     var elem = a[i];  
  5.     console.log(elem.text);  
  6.     elem.target = "_blank";  
  7. }  

 

Once done, start the test by clicking any of the navigation links and verifying if it is opening in a new tab. So now, we will be updating the same to Master Page of SharePoint site using SP designer.

Below are the steps to configure the same in Master page

  • Open SP Designer and connect to the site with authorized user account and password.

  • Navigate to the Master page and open seattle master page. Copy the above code and paste it here as shown in the below screenshot.

  • Once done, save this file and verify if it’s working fine.

Thanks.

Ebook Download
View all
Learn
View all