Saturday, February 13, 2016

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="" type="text/javascript"></script>
   2: <script type="text/javascript">
   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=''>First Link</a> \
   8:                           </li> \
   9:                           <li class='ms-core-suiteLink'> \
  10:                             <a class='ms-core-suiteLink-a' href=''>Second Link</a> \
  11:                           </li>";
  12:         $s('.ms-core-suiteLinkList').prepend(linkString);
  13:     });
  14: </script>



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="" type="text/javascript"></script>
   2: <script type="text/javascript">
   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=''><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=''><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:


, ,


Got something to say? Join the discussion »
    Posted by Allen on 2/2/2015
    Great blog post! Thank you very much works great
    Posted by Allen on 2/2/2015
    Great blog post! Thank you very much works great
    Posted by Allen on 2/2/2015
    Great blog post! Thank you very much works great
    Posted by Allen on 2/2/2015
    Great blog post! Thank you very much works great
    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.

    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


About C5 Insight

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

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

Upcoming Events

The Evolution of the Intranet: Creating a Culture of Collaboration

02/18/16 @ 3:00 PM ET This webcast will be broadcast LIVE from Transitioning Your Intranet to a Digital Workplace - See mo......

Deminar: Microsoft Social Engagement for Marketing, Sales, Service and Research

02/24/16 @ 2:00 PM ET In this deminar (that's demo + seminar) session, we will take a look at the Microsoft Social Engagem......

The 7 Deadly Sins of SharePoint: Planning Success and Avoiding Failure

03/10/16 @ 3:00 PM ET 60% of SharePoint projects are stalled, struggling, or failing, according to research conducted by t......

Top Downloads

SharePoint 2013 Feedback Solution - collect feedback from users into a custom feedback list that captures their feedback and exactly where they were in SharePoint when they provided it.

Why CRM Fails - research into CRM failure, best practices, and how to recover from a failing project.

The 60 Second Collaboration Readiness Self-Evaluation - is your team really ready to collaborate?  If they're not, software isn't going to help.  Take the quick self-evaluation in each department to understand how well your culture collaborates.

Identify Your Support Gaps - collaboration and CRM projects often fall short when it comes to supporting users, because support for these projects is different from other projects.  



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

The opinions 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