SharePoint 2010 Ribbon Visibility

When working on a public facing or anonymous SharePoint site, you typically want to hide the ribbon from users who are not authenticated to the SharePoint server. There's a bunch of options out there to control the ribbon visibility (some better than others), but they all seem to be "heavier" than they need to be. Many of the approaches require changes to the #s4-workspace element, since SharePoint scrolling will break if you completely hide the #s4-ribbonrow element. Other approaches use JavaScript fired every time the page is rendered in order to determine if the ribbon should be displayed, and appropriately handle its' status.

I was surprised, that in all of my research, nobody posted a simple, pure CSS approach to this, and it's easy enough to leverage SharePoint's native security trimming with some CSS to create a solution that has minimal impact to page performance, and a negligible impact on other page functionality (as you typically see when you start mucking with #s4-workspace and the scripts tied to it).

To start, create a custom class to handle our ribbon visibility. We'll create this in our custom style sheet that's loaded after all of the core styles.

body .ribbonVisibility {
  display: none;
}

Next, we want to apply that class to the existing #s4-ribbonrow element on our masterpage.

<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle ribbonVisibility">

Finally, we want to add a SharePoint security trimming control to determine if a user is authenticated, and if they have a specific permissions level. If they meet the criteria, the control will output the markup within. In this case, we want an authenticated user with a "ManageLists" permission. If the current user meets that requirement, we're going to output some CSS to override our "display: none;" to show the ribbon.

<SharePoint:SPSecurityTrimmedControl ID="ribbonVisibility" PermissionString="ManageLists" runat="server">
  <style type="text/css">
    body .ribbonVisibility {
      display: none;
    }
  </style>
</SharePoint:SPSecurityTrimmedControl>

This control can be placed anywhere after your custom CSS as been called.

There are other approaches out there that use a security trimmed control to trim the entire #s4-ribbonrow element, but if you wish to leave the #s4-workspace element and all of the scrolling and window sizing scripts that are tied to it unchanged, hiding the entire element will result in misplaced scroll bars and broken functionality. This is the lightest weight approach I've found to this issue.