Boil it down to the basics… the SharePoint 2010 Ribbon

Sigh, the ribbon. Those two words manage to give most SharePoint developers and designers the chills. And not necessarily in the good way. While the ribbon provides a lot of cool interactivity and functionality for our end users, you just look at it wrong and stuff can go whacky in your SharePoint site. This is the first post in a series dedicated to working with the ribbon. Let’s start off with reviewing what the ribbon really is and what code bits are involved.

What is a part of the ribbon?

When you imagine the ribbon, you likely picture this:

SharePoint out of the box ribbon screenshot

There are a lot of elements that are grouped with the ribbon that don’t have to be:

SharePoint 2010 ribbon highlight screenshot

There are several aspects of the ribbon area and what is grouped around it that goes against well established usability patterns… what people are looking for and expecting when they visit a web site.

  • Site Actions is located on the left instead of the right – if you think through all of your favorite shopping sites, banking sites, etc. the action to log into a site, modify your profile and perform administrative duties is usually located in the upper right of the web page.
  • The global breadcrumb (folder icon with up arrow) is collapsed – most breadcrumb systems list the full path of where you are in the site hierarchy and in full view.
  • Social tagging (“I like it” and “Tags & Notes” buttons) in the upper right – generally options to “like” a post, option to share it, tweet it, etc. are listed at the bottom of the article/content.  You are remarking on the content itself, not on the site as a whole.
  • The current location breadcrumb, or what we affectionately refer to as the SharePoint Jumbocrumb, located in the site title area – while this breadcrumb does show your location without selecting an icon (what the global breadcrumb requires) the placement is just weird. The site title is essentially pulling double duty as both a site title and a breadcrumb system. In usability patterns, site titles are just that. A site title. Breadcrumb is located under the header area and usually formatted with a much smaller font size.
  • And the biggest of them all… the ribbon toggle between the actual ribbon and the area that it uses when toggled on.  Once your users do something to trigger the ribbon toggle, the site icon, title, Jumbocrumb, social tagging, top navigation bar and search all disappear.  They have to figure out on their own to select the “Browse” tab to toggle the ribbon back off, thus showing those page components again.

So, what to do?  Rip all of that stuff out of the ribbon and move those components to other places on the web page that makes sense to your users. Doing so will require creating a custom master page.  Please don’t start off with a copy of v4.master.  Instead use one of my master pages.  They include comments and small code fixes and are a heck of a lot easier to modify than diving into v4.master. Now let’s get to coding.

  1. Open your custom master page and switch to Code View.
  2. Open the Find dialog and search for id=”s4-ribbonrow”. Please make sure Find in source code is checked under the Advanced column in the Find dialog box. Double click the search result and you should be here:
    <div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
  3. This is the outermost container for the ribbon. Be sure to keep it around. SharePoint relies on the ID for some of the ribbon magic your site does.
  4. Next up is another wrapper DIV element and the actual ribbon control.
    <div id="s4-ribboncont">
    <SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer" CssFile="">

    These are the only things that need to remain in the s4-ribbonrow DIV element.

  5. After that is the peripheral content control.
    <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowLeft" CssClass="ms-siteactionscontainer s4-notdlg">

    This is one of two controls like this. The control does what it sounds like, it is peripheral content for the ribbon area. You can move the items out of these controls to wherever you like in your master page and then delete the controls. The second control looks just like the first and has a Location of TabRowRight.

  6. Now it is up to you to get creative and think about where to move elements in your web page. Just remember that the elements that get moved around have three choices:
    • Go within the workspace (div id=”s4-workspace”)
    • Go above the ribbon DIV element (div id=”s4-ribbonrow”)
    • Go wherever you like and remove it from the page flow and absolute position it using CSS

    If you go outside of these three choices you will likely have display issues with your content area not scrolling properly or content getting cut off at the bottom. This goes back to the fancy math that SharePoint does to calculate the workspace area.

  7. When everything has been moved out and positioned elsewhere, you will end up with a neat and tidy ribbon in your master page. Here is a full code example, based on what I do in my custom master pages
    <!-- =SharePoint - Content in Ribbon -->
    	 <div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
    	 <!-- ^ =SharePoint =Container - Ribbon Block
    	  -The s4-ribbonrow DIV ID is mandatory and must be kept for the ECMAScript logic (Ribbon) so the Ribbon will function; also used for modal dialog box styles.
    	  -It is not recommended to add anything within the Ribbon container below as the height is set using static values that will not adjust to additional content.
    	  -->
    	  	<div id="s4-ribboncont">
    			<!-- =Ribbon =Container - Control -->
    			<SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer" CssFile=""/>
    		</div>	
    
    		<!-- =Ribbon =Container - Notification area under Ribbon -->
    		<div id="notificationArea" class="s4-noti"></div>
    
    		<asp:ContentPlaceHolder ID="SPNavigation" runat="server">
    			<!-- =Publishing - Enables publishing features on Publish tab in Ribbon -->
    			<SharePoint:DelegateControl runat="server" ControlId="PublishingConsole" Id="PublishingConsoleDelegate"></SharePoint:DelegateControl>
    		</asp:ContentPlaceHolder>
    
    		<div id="WebPartAdderUpdatePanelContainer">
    		<!-- ^ =Page Tools =Container - Add Web Parts Panel -->
    			<asp:UpdatePanel ID="WebPartAdderUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false" runat="server">
    				<ContentTemplate>
    					<WebPartPages:WebPartAdder ID="WebPartAdder" runat="server"/>
    				</ContentTemplate>
    				<Triggers>
    					<asp:PostBackTrigger ControlID="WebPartAdder" />
    				</Triggers>
    			</asp:UpdatePanel>
    		</div>
    	<!-- =SharePoint =Container - Ribbon Block - END s4-ribbonrow -->
    	</div>

A note about Site Actions

The Site Actions menu code must appear above the ribbon control in your master page, or Site Actions menu won’t function properly on your site. If you don’t plan on editing anything in the Site Actions menu or after you do so, I suggest that you run the code block through a tool to remove extra line breaks and spaces. It will make you master page easier to navigate and manage.

Keeping your site header visible at all times

You have removed the non-ribbon elements from the ribbon area. Now it is time to take charge of our site header area, including site icon, title, top bar navigation and search.

  1. In your custom master page, open the Find dialog and search for id=”s4-titlerow”. Double click the search result and you should be here:
    <div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">
  2. Remove the s4-titlerow ID AND the s4-titlerowhidetitle class. Save your file and check out the results in the browser. You should see the header area appear lower on the page when the ribbon is toggled on.

SharePoint 2010 ribbon showing site header screenshot

And that is it! :)

You will likely want to continue to move elements around from the header area.  The same rules listed above still apply:

  • Go within the workspace (div id=”s4-workspace”)
  • Go above the ribbon DIV element (div id=”s4-ribbonrow”)
  • Go wherever you like and remove it from the page flow and absolute position it using CSS

The follow up post in this series discusses layout options for the ribbon: Gathering requirements for your ribbon needs.