Breadcrumbs are great for navigational purposes and help users cruise around your SharePoint site with assisted ease. Sometimes you may want a page to not have the breadcrumb trail and you may be looking for an easy way to get rid of them on that specific page. Follow along on this easy tutorial to view how to do just this!
First, a breadcrumb is basically a link back to previous pages if you didn’t already know. Using CSS and the Content Editor Web Part we will make breadcrumbs disappear with a few lines of code. Follow along through the following steps and you’ll know be removing those breadcrumbs in no time. Please note you must have the appropriate site permissions to complete this tutorial.
Before: 
After (no breadcrumbs): 
1. Navigate to the page you wish to not have the breadcrumb navigation
2. Insert a Content Editor Web Part by clicking on Site Actions > Edit Page and clicking the Add a Web Part
3. Navigate to the CEWP and enter into the appropriate zone and modify the Web Part
4. Click on Source Editor and enter the following lines of code and wrap the code in CSS style tags:
td.ms-titlearea { display:none; }
Now apply the changes and you will see the breadcrumbs are no longer there.
Note: You may choose to hide the webpart by expanding the layout tab and clicking “hidden”
Related posts:
- Style a Page using the Content Editor Web Part and CSS Do you have pages that look bland that you want to add some color to? Perhaps you would like some a background behind your web part titles. Maybe you want to hide the recycle bin on one page, but not another. Using the Content Editor Web Part you are able to add CSS to a [...]...
- Redirect a SharePoint site by using the Content Editor Web Part This blog demonstrates a useful way to use the Content Editor Web Part to redirect users of a particular site. The script prompts a site's end users they will be redirected and then redirects them after a certain period of time. At some point in time you might want to point users to another location [...]...
- SharePoint Workflow: Remove the “?????” for blank values in email So you have emails being sent out using SharePoint workflow but the problem is the blank values return five question marks "?????" and this is not very appealing to the user. Perhaps you would like it to say something else instead that wouldn't confuse your recipients as much. Follow this tutorial to learn how to [...]...
- Discard SharePoint Page Checkout Scenario: you are using SharePoint Designer to edit pages and the one you want to edit is checked out by someone and you need to edit it. Using SharePoint Designer you cannot easily discard a checkout, but you can using the browser. Here's the typical SPD Checkout popup: Uh oh, this prompt doesn't look very [...]...
- How to remove the “title” column from a SharePoint list Have you asked yourself the question: How do I remove the 'title column' from a Sharepoint list? It can be annoying trying to figure out how to remove this column from default lists. Often, site admins want their audiences to click on "New Item" in a Sharepoint list and not have to fill out the [...]...
This did not work for me. Here’s what I entered:
td.ms-titlearea {
display:none;
}
This is a web part page I’m trying to edit. Not sure if that makes a difference or not.
Drew
3 Dec 09 at 3:24 pm
Thanks for pointing out that typo in the code. I fixed it above to not include the tags.
Devin Walker
3 Dec 09 at 10:56 pm
Worked a treat. Thanks.
Drew, you might not have put before and after.
John
8 Jan 10 at 10:36 am
I put in td.ms-titlearea { display:none; } and the breadcrumbs still show up. Did I do something wrong?
Ed
1 Feb 10 at 8:54 am
Did you wrap it in style tags? If so, use firebug or IE developer tools to look into the source code and see what the breadcrumbs CSS class is… hope this helps!
Devin Walker
1 Feb 10 at 12:47 pm
Devin,
I tried using this code and I am still not able to get the breadcrumb trail to disappear.
Any suggestions? I am not a coder so this a bit out of my comfort zone.
Thanks
Mr_Freeze
9 Apr 10 at 11:03 am
Sorry forgot to paste the code.
( )
Mr_Freeze
9 Apr 10 at 11:05 am
Hey there Mr Freeze
Best plan for you would be to use either IE developer tools or Mozilla’s Firebug to see what the CSS class is being used for the breadcrumbs in your installation of MOSS. Sorry I didn’t get your code pasted in there… typically you would set it the class to display:none; to hide it from users. Hope this helps!
Devin Walker
9 Apr 10 at 12:03 pm
I got it!
.ms-titlearea { display:none; }
Thanks
Mr_Freeze
12 Apr 10 at 9:28 am
Good Job!
Devin Walker
12 Apr 10 at 9:04 pm
What do you mean “wrap it in style tags?”
I opened my default.master and confirmed the class of the td is ms-titlearea, but adding the code to a content editor web part didn’t get rid of the breadcrumbs.
atlrunner
28 Apr 10 at 2:05 pm
I mean wrap in tags
Devin Walker
29 Apr 10 at 12:13 am
You do realise that style tags must be included in the of the document — according to the html spec, css tags included in the page body like this may not be honoured.
It works for you — fine. But it would make more sense to use JavaScript to remove the breadcrumbs from the DOM, or edit the page layout.
John Wells
18 May 10 at 2:36 am
it stripped a tag. The first sentence should read “You do realise that style tags must be included in the head of the document”
John Wells
18 May 10 at 2:37 am
“You do realize that style tags must*”…?! Optimally they shouldn’t even be in the head but on another stylesheet. John, perhaps you missed the point of the article… this is a quick and dirty way to get rid of the breadcrumbs. You can use whatever method you want, this one is CSS through a CEWP.
Devin Walker
18 May 10 at 10:42 am
In the CEWP, clicking the edit Edit HTML Source button and entering:
td.ms-titlearea {display:none;}
not only didn’t work, but the editor removed it altogether.
??
Chuck Duncan
2 Aug 10 at 9:05 am
In my previous comment I had wrapped the line in style type=text.css and end style tags. They didn’t come through in message.
Chuck Duncan
2 Aug 10 at 9:06 am