Friday, November 21, 2014

Add custom links to the SharePoint 2013 Suite Bar with jQuery

Posted in [SharePoint], [Technical] By Kyle Wright @ 4/3/2014

There are a few different ways you can get custom links into the SharePoint 2013 suite bar.  This is the blue bar above the ribbon at the very top of the page.  This method is going to utilize jQuery to inject these links as the page loads and has the added benefit of working in SharePoint Online as well.  It is very simple really, just a few lines.  This will need to go in your master page if you want the links to appear on all of your pages.  It would be possible to just put the contents below into a Content Editor web part if you just wanted the links inserted on an individual page.  You can add as many links as you need, as long as they fit in the bar.  Just repeat lines 9-11 for each new link.

   1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
   2: <script type="text/javascript">
   3:  
   4:     var $s = jQuery.noConflict();
   5:     $s(document).ready(function() {
   6:         var linkString = "<li class='ms-core-suiteLink'> \
   7:                             <a class='ms-core-suiteLink-a' href='http://www.firsturl.com'>First Link</a> \
   8:                           </li> \
   9:                           <li class='ms-core-suiteLink'> \
  10:                             <a class='ms-core-suiteLink-a' href='http://secondurl.com'>Second Link</a> \
  11:                           </li>";
  12:         $s('.ms-core-suiteLinkList').prepend(linkString);
  13:     });
  14: </script>

 

onprem

The code is a bit different for SharePoint online within Office 365.  The underlying structure is a bit different, so we have to build the links differently and target them to a different div element.  repeat lines 13-19 for each new link that you need to add.  There are so many links already in that space in Office 365, so you may only be able to fit 1 or 2 anyway.

   1: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
   2: <script type="text/javascript">
   3:  
   4:     var $s = jQuery.noConflict();
   5:     $s(document).ready(function() {
   6:         var linkString   = "<div class='o365cs-nav-O365LinksItem'><div> \
   7:                             <a title='First Link' \
   8:                             class='o365button o365cs-nav-navItem o365cs-nav-workloadLink o365cs-spo-topnavLink o365cs-topnavLink' \
   9:                             id='O365_MainLink_ShellMail' role='menuitem' aria-disabled='false' aria-selected='false' \
  10:                             aria-label='First Link' href='http://firsturl.com'><span>First Link</span> \
  11:                             <div class='o365cs-activeLinkIndicator o365cs-nw-b' style='display: none;'></div></a> \
  12:                             </div><div style='display: none;'></div></div>";
  13:             linkString +=  "<div class='o365cs-nav-O365LinksItem'><div> \
  14:                             <a title='Second Link' \
  15:                             class='o365button o365cs-nav-navItem o365cs-nav-workloadLink o365cs-spo-topnavLink o365cs-topnavLink' \
  16:                             id='O365_MainLink_secondLink' role='menuitem' aria-disabled='false' aria-selected='false' \
  17:                             aria-label='Second Link' href='http://secondurl.com'><span>Second Link</span> \
  18:                             <div class='o365cs-activeLinkIndicator o365cs-nw-b' style='display: none;'></div></a> \
  19:                             </div><div style='display: none;'></div></div>";
  20:         $s('.o365cs-nav-O365Links div:first').prepend(linkString);
  21:     });
  22: </script>

 

As you can see, there is more code, but the outcome is essentially the same:

online

, ,

Comments

Got something to say? Join the discussion »
    Posted by Xear on 7/31/2014
    Great article! Still i have a problem.. I used the O365 code in my SPO (O365) and put it in the masterpage html-file. The jQuery didn't load until I put it right after the meta lines in the top of HEAD section. Then I checked that the jQuery was loaded and copied the code for adding links in the HEAD section (top and bottom) but the links do not show up. Any ideas how to get it working? Thank you so much! :)
    Posted by Paul on 7/9/2014
    Where in the Masterpage would this go? And is there anyway to get rid of Newsfeed, One Drive, Sites with this jQuery method or replace them with new links?

    Thanks for the article.

    Paul
    Posted by Michelle on 5/30/2014
    Thanks for this!! Now I just have to figure out how to replace the word "Newsfeed" with "My HUB"

leave a reply

 [Quick Submit with Ctrl+Enter]

Remember my details
Notify me of followup comments via e-mail

C5_Insight

About C5 Insight

We are a Microsoft Gold Certified partner focusing on SharePoint, Microsoft Dynamics CRM and Salesforce.com.  Learn more about us by visiting our website.

Search

We Wrote the Bible on Microsoft SharePoint and Dynamics CRMBook-Microsoft Dynamics CRM 2011 and SharePoint 2010 Bible

Tags

Maximize

Recent Comments

Maximize

Blog Roll

Maximize

Disclaimer

The information herein may be used solely at your own risk.  No warranty is made by the author or by C5 Insight, Inc.

The opinons expressed herein are those of the individual authors and do not necessarily represent C5 Insight, Inc in any way.

Copyright 2011-2013 by C5 Insight