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


Anyone who has 'attended' a physical meeting by 'conferencing in' in knows the frustrations & limitations that come from not being in the room. You're the voice in the ceiling & not equally represented in the conversation.

This is no longer acceptable.

Today, we find ourselves facing the “hybrid work paradox.”

Employees are keen to retain flexibility. At the same time, human-to-human collaboration remains important.

To marry the best of both, hone your strategy, spaces, & tech to suit employee needs.

It's the day of the show, y'all!

Join the #PixelMillWebinars this morning at 11am PST for a live panel discussion about what the #digitalworkspace looks like for a #hybrid team, & how #Microsoft365 can empower your users no matter where they're working.


Join the #PixelMillWebinars this Thursday as we welcome key players from @OrchestrySoft, @KieferConsult, and @AP_Mortgage to discuss the hybrid work paradox and how #Microsoft365 can empower your users no matter where they're working.

We've all been itching to get "back to normal," but what does that mean? Are we missing out on valuable lessons learned by trying to return to something that perhaps wasn't working before?

Join us next week for a live panel discussion on the new normal.

Subscribe to PixelMill's

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch