Customize Suite Bar In SharePoint 2013

What is Suite Bar

SharePoint 2013 and Office 365 introduced the new Suite bar link at the top. It ideally displays the words SharePoint and Office 365 for respective SharePoint versions. In addition to that it also displays links to Newsfeed, OneDrive and Sites. For many this is a useless empty space which they can hide from the master page. However for others it is an option to customize upon. We can either add new links to the suite bar or remove existing links from it. Suite Bar by design is created as an Out of the Box delegate control and is one of the few new Delegate controls added to SharePoint 2013.



Above are the links that come up by default in the suite bar. In this walkthrough we will see how to add a new link to the suite bar without any custom deployment.

Internal Implementation

The suite bar has a class that binds all the suite bar links together named  ‘.ms-core-suiteLinkList' . Once we get ahold of it we can add singular suite bar links to it with the class name 'ms-core-suiteLink' which identifies a single suite bar link .The below script shows how we can use jquery to manipulate and add the new suite bar link to the existing DOM structure.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        varlinkAddition = "<li class='ms-core-suiteLink'> \
<a class='ms-core-suiteLink-a' href='http://www.c-sharpcorner.com/'>C# Corner</a> \
</li> ";
        $s('.ms-core-suiteLinkList').prepend(linkAddition);
    });
</script>

Apply the Script

Now let’s see how to add this script to the page. Go to the edit mode of the page.



Select web part and chose Content Editor from Media and Content.



Save the script as a text file to the SharePoint Location say : Site Assets.



Copy the link of the script file to the Content Editors Content Link. Click on Apply.



Now this will apply the custom script to the page and we can see that a new suite bar link has been added to the Suite Bar Control. This will be applied only to a specific page. If we want the change to be reflected throughout the site we can add the script to the master page. Thus in this article, we saw how to customize the suite bar by adding a link to the Suite bar control.