SharePoint Insights: Ribbon & Suite Bar Customizations

When I look at our finished projects for clients, the changes are abundantly clear. It’s important to keep in mind that like a photo, the finished picture is made up of many pixels. Through this blog series, hopefully we can look at as many of those pixels as possible so that you have a clear idea of how the big picture is composed. Today’s post will look at the suite bar and ribbon “pixel” of your overall branded SharePoint picture.
In SharePoint 2013 there is the newly added suite bar above the ribbon within company portals. The suite bar contains the SharePoint logo on the left as well as the Suite links, welcome menu, site “gear” icon and other primary navigation to the right. The ribbon resides below with common page and list options on the left and share, follow, and other shortcuts on the right.

Suite Bar to the upper left and Ribbon along the bottom of the Suite Bar
Suite Bar to the upper left and Ribbon along the bottom of the Suite Bar

If you are using SharePoint Online your suite bar will look different as Microsoft continues to improve the suite bar in Office 365, but the following principles are similar for SharePoint 2013 and SharePoint Online. Since there is a steady flow of updates for SharePoint Online, here at PixelMill we have had to be formative in our development of the customizations of the suite bar and ribbon, which I will address in a moment.
We often have a request to make these two bars into one bar. Customers want this customization for a variety of reasons, one being easier usability when transferring from SharePoint 2010 to SharePoint 2013. The suite bar is a new addition to SharePoint 2013 making the menu interface more confusing for some users. Almost all UI designers will tell you maintaining a level of simplicity is key. Menu user interface needs to be simple and clear so that users can navigate with ease. Other organizations feel that the bar simply takes up too much space on the page. This leaves more real estate for the meat of your SharePoint site.
On a side note, after a recent conversation with my developers I have been made aware that there has been a lot of resistance lately with modifying the suite bar or ribbon in SharePoint Online. I am assured that using the theming engine in SharePoint Online, called Composed Looks helps alleviate the pains. We also found a few tricks which so far have saved us from many of the pitfalls others have encountered with the frequent updates Microsoft makes. Essentially we are developing defensively, anticipating that Microsoft will update and what they will update lets us develop or code in ways that will offer the path of least resistance from Microsoft’s updates.
When undertaking the development work for this customization we have found that this integration is easiest done by moving the suite bar elements into the ribbon bar (therefor creating one bar). We then hide the suite bar completely from your company portal. The reason we do it this way and not the reverse is that out of the box (OOTB) ribbon is a more dynamic tool.
There is also an abundance of other customizations we do for the ribbon and suite bars. Another common customization is the ability to hide the suite bar and ribbon completely. When hidden a small solid colored ribbon exists at the top of the screen, to show the bar you would click on this and your suite and ribbon would appear.
Solid blue line appears to toggle Suite Bar and Ribbon visibility
Solid blue line appears to toggle Suite Bar and Ribbon visibility

This has a couple of positive effects. One it gives the user the ability to control how their SharePoint work space looks. This gives the users the feeling ownership over how they use their SharePoint site. For some people they like clean spaces and lines. These people are more likely to be distracted by the menu options when working on SharePoint. These users would take advantage of their ability to hide the menu when menu items are not needed. Finally it also add a user experience more in line with other sites users use. Many sites have a hiding menu bar and users are familiar with being able to toggle menu bars visibility.
As Eric most recently covered in his blog, it is also possible to hide the suite bar and ribbon for anonymous users on your page. This is important for all public facing SharePoint sites. It is also possible to add a sign in control to anonymous users so that, if needed, the can sign in with their credentials in order to see and access the suite bar and ribbon.
If you’re interested in how we recommend you code for these changes take a look at PixelMill President and co-founders blog, Eric is currently on part 5 of a series on Ribbon and suite bar customizations. If you have any questions about why you would want to customize this part of SharePoint leave a comment below!

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under


Are you preparing to launch a new #SharePoint intranet?

Don’t spring it on employees out of the blue. First, talk to as many of them as you can.

Planning is just phase one. For all of our tips, watch our recent webinar!

It's that time again! Join #Microsoft MVP & Regional Director, @EricOverfield on Thursday, October 28th, at 11:00 AM PST as he walks through #MicrosoftViva’s current state & offerings and what they mean to your #digitalworkspace right now.

It's the final countdown! Join @EricOverfield at 11am PST to learn about common pitfalls and paths to success when moving to #SharePointOnline. You'll walk away with practical tips to use in your organization today!

In today's episode of the #PixelMillWebinars, you'll learn from the experience of a global organization’s path to digital teamwork victory and get to see first-hand how to successfully plan a smooth migration for your team.

Join us at 11am PST!

It's the day of the show y'all! Join #Microsoft RD +MVP @EricOverfield at 11am PST as we walk you through a multi-national enterprise software company’s migration journey to #SharePointOnline. Learn about common pitfalls and paths to success.

Subscribe to PixelMill's

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch