I’ve recently discovered that it is more useful to include breadcrumb navigation inside of certain page layouts instead of housing it inside of master pages. Quite a few subsites and pages generally need to display breadcrumbs, so including the breadcrumb inside the master page has always been the go to method; however, there are special circumstances where you need to hide the breadcrumb on certain sites and pages. This method required you to add a small bit of CSS inside certain page layouts in order to hide the breadcrumb. Why not switch things up and create a few page layouts that have the breadcrumb snippet already inside them?
One snippet to rule them all!
Since the release of SharePoint 2013, I’ve grown to refer to all SharePoint controls as snippets. The breadcrumb snippet that we’ll be using looks something like this:
<asp:SiteMapPath runat="server" ParentLevelsDisplayed="2" SiteMapProvider="CurrentNavigation" RenderCurrentNodeAsLink="false" SkipLinkText="" RootNodeStyle-CssClass="home" NodeStyle-CssClass="bc-node" CurrentNodeStyle-CssClass="current"/>
You’ll be able to copy and paste this right into your page layout and see results instantly!
1. Find the main placeholder control
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
</asp:Content>
2. Insert the breadcrumb snippet
In this example, we’ll be wrapping our breadcrumb snippet in a div and give a class name of “breadcrumb”.
<div class="breadcrumb">
<asp:SiteMapPath runat="server" ParentLevelsDisplayed="2" PathSeparator="" SiteMapProvider="CurrentNavigation" RenderCurrentNodeAsLink="false" SkipLinkText="" RootNodeStyle-CssClass="home" NodeStyle-CssClass="bc-node" CurrentNodeStyle-CssClass="current"/>
</div>
Wrapping the snippet in a div and giving it a class will allow us to better control which elements are styled through our CSS more easily. Also notice that in our breadcrumb snippet, we’re using some custom CSS classes on each of the node types, again this allows for easier styling through CSS.
Once you have that in place, and save your page layout, you should see a classic approach to a breadcrumb navigation on your page.
3. Remove the path separators
Because we’re going to later style this breadcrumb our own way, we need to remove the path separators from this breadcrumb. To do this, we need to add another property to the breadcrumb snippet. The property we add is:
PathSeparator=""
By not putting any value into the property, it effectively removes the path separators. So now our final breadcrumb snippet should look like the following:
<asp:SiteMapPath runat="server" ParentLevelsDisplayed="2" PathSeparator="" SiteMapProvider="CurrentNavigation" RenderCurrentNodeAsLink="false" SkipLinkText="" RootNodeStyle-CssClass="home" NodeStyle-CssClass="bc-node" CurrentNodeStyle-CssClass="current"/>
The breadcrumb on your page should now look like this:
Let the Styling Begin!
4. Add CSS
Now that we have our breadcrumb setup in our page layout, it’s time to add a little styling to it. We’ll be using some nice CSS3 features to make the breadcrumb a bit more exciting. The only downfall is, is that this bit of CSS will only work with modern browsers and IE9+. Grab the following CSS and put it into your CSS file.
<<**THIS IS WHERE THE CODE WILL GO**>>
/*============================*/
/* Breadcrumb
/*============================*/
/* Hide the text for the home link */
.breadcrumb a.home { color: transparent;font-size:1px;vertical-align:middle;}
.breadcrumb a.home:hover { color: transparent; }
/* Add the 'home' icon from Google's Material Design Icons */
.breadcrumb a.home:before { font-family: "Material Icons"; content: '\E88A'; font-size: 24px; color: #d1d1d1; width: 20px; height: 20px; overflow: hidden; vertical-align: middle; outline: none; border: 0; box-shadow: none; background: transparent; }
.breadcrumb a.home:hover:before { color: #fff !important; }
/* Begin breadcrumb wrap style */
.breadcrumb { display: inline-block; border-radius: 5px; overflow: hidden; border: 1px solid #e1e1e1;margin-bottom:35px; }
.breadcrumb a { display: inline-block; font-size: 12px; line-height: 28px; color: #222; position: relative; text-align: center; }
.breadcrumb a:first-child { padding-left: 26px; border-radius: 5px 0 0 5px; }
.breadcrumb a:after { content: ''; position: absolute; top: 0; right: -14px; width: 28px; height: 28px; transform: scale(0.707) rotate(45deg); z-index: 1; box-shadow: 1px -1px 0 1px #e1e1e1; border-radius: 0 5px 0 50px; }
/* Set the color for the current breadcrumb node */
.breadcrumb .current {color: #0072C6;}
/* Tidy up the position on our custom css classes we added to each breadcrumb node */
.breadcrumb a.home { padding-left: 12px; }
.breadcrumb a.bc-node { padding-right: 10px; }
.breadcrumb .current { padding: 0 15px; margin-left: 10px; }
/* Breadcrumb hover styles */
.breadcrumb a,
.breadcrumb a:after { background: #fff; color: #222; transition: all 0.35s ease-in-out; }
.breadcrumb a:hover,
.breadcrumb a:hover:after { background: #0072C6; color:#fff; }
.breadcrumb a:hover:before { color: #0072C6; }
Now that you have the CSS in place, your breadcrumb should now look something like this:
In the CSS you will see that we replaced the ‘home’ text with an icon using Google’s Material Design Icon font. For more information on how to get this loaded onto your site, take a look at How To Brand SharePoint Navigation, where we walk through how to load scripts onto your master page.
And that’s it! You now have a great looking breadcrumb on your site.
For more tips and tricks like this, check out our SharePoint design blogs. Discuss ways to create your own custom designed SharePoint intranet by talking to one of our consultants today!
