Instead of another blog about PowerShell, I wanted to share a quick trick with CSS.  It’s quite common in a SharePoint branding design to include a breadcrumb navigation.  As you likely are aware, SharePoint includes two primary methods of navigation:

• Global (or top) navigation
• Quick Launch (left-side) navigation

There are additional controls that provide a “breadcrumb” within libraries.  In SharePoint 2007 there was a simple horizontal breadcrumb separated by arrows, and SharePoint 2010 incorporated a tree-style drop down breadcrumb.  The site to site breadcrumbs were removed starting in SharePoint 2013. 

There are many blogs on how to bring either the “up-folder” or simple horizontal breadcrumb back.  But sometimes, you want to hide the root node.  In today’s post I’ll show you how to do that with just CSS.

Adding the Breadcrumb Back

First and foremost, my favorite blog on how to add the horizontal breadcrumb back from branding whiz Heather Solomon.  Take note that the control code to use will differ depending if you use a detached master page or still attached with Design Manager. 

How to Hide the Root Navigation Node

Ok, you’ve got your breadcrumb and fine and dandy, and everything is great, right?  Well not so fast.  Maybe it’s because someone created the root of the intranet as a subsite of the root site of the site collection, or maybe you just don’t like the name of the root node. 

When you go doing search on ye old internet, you find that you could use just CSS.  If we look at the control, we notice there are some classes built-in as parameters:

NodeStyle-CssClass="breadcrumbNode" CurrentNodeStyle-CssClass="breadcrumbCurrentNode" RootNodeStyle-CssClass="breadcrumbRootNode"

Notice the one for breadcrumbRootNode.  So you could just do:

.breadcrumbRootNode {display:none;}

Or, you could leverage the first-child selector like:

a:first-child {display:none;}

Both of these will hide the root node but leave a little issue.  So here’s our breadcrumb:

Now let’s hide the root node:

Hmm, better, but not quite there.  So now what?  After some further research, you might find some JavaScript or jQuery to do the job like this example.  I’ve tested it, works. But it just seems like we can do this with JUST CSS right?  You can!  My friend and colleague Kyle Wright figured this out so credit goes to him.  It does the same thing as the JavaScript, but only using CSS.

Here’s the magic sauce that you need to hide the root node AND the following carrot (greater than) separator symbol.  In your HTML of your master, let’s assume you wrapped the breadcrumb control in a div with a class of “breadcrumb”.  Our CSS would be this:

.breadcrumb span span:first-child, .breadcrumb span span:nth-child(2){display:none;}

Bam!  Voila! 

You could certainly take this further, but that’s for another day.  How is this working?  If we F12 and I do this manually, that helps to explain how this works:

We can just target the parent breadcrumb class, for the spans, hide the first and 2nd nodes. 

Hope this helps you stretch those CSS brain cells and keep you away from that any nasty scary JavaScript.