Follow Us:
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>
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>
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:
Great blog post! Thank you very much works great
Thanks for this!! Now I just have to figure out how to replace the word "Newsfeed" with "My HUB"
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
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! :)
The complementary paper includes over 12 years of research, recent survey results, and CRM turnaround success stories.
Request Download
This 60-second assessment is designed to evaluate your organization's collaboration readiness.
Learn how you rank compared to organizations typically in years 1 to 5 of implementation - and which areas to focus on to improve.
This is a sandbox solution which can be activated per site collection to allow you to easily collect feedback from users into a custom Feedback list.
Whether you are upgrading to SharePoint Online, 2010, 2013 or the latest 2016, this checklist contains everything you need to know for a successful transition.