5

Posted: October 27th, 2009    By: Devin Walker   

bread_iconBreadcrumbs 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:  before

After (no breadcrumbs):  after

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

siteactions

addwebpart

3. Navigate to the CEWP and enter into the appropriate zone and modify the Web Part

modify

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”

hidden

5 Responses to 'Hide SharePoint Breadcrumbs on Pages'

Subscribe to comments with RSS or TrackBack to 'Hide SharePoint Breadcrumbs on Pages'.

  1. 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

  2. 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

  3. Worked a treat. Thanks.

    Drew, you might not have put before and after.

    John

    8 Jan 10 at 10:36 am

  4. 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

  5. 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

Leave a Reply