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

Related posts:

  1. 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 [...]...
  2. 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 [...]...
  3. SharePoint Scrolling News Items Using the Content Editor Web Part to create a scrolling javascript newsflash is an easy and quick way to display announcements and other information to your site users. Follow along with this article to learn how it works or simply download the webpart and import it to your site! Quick and Easy: 1. First, download [...]...
  4. 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 [...]...
  5. 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 [...]...
  • Drew

    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.

  • http:/www.dlocc.com Devin Walker

    Thanks for pointing out that typo in the code. I fixed it above to not include the tags.

  • John

    Worked a treat. Thanks.

    Drew, you might not have put before and after.

  • http://interanetonly Ed

    I put in td.ms-titlearea { display:none; } and the breadcrumbs still show up. Did I do something wrong?

  • http:/www.dlocc.com Devin Walker

    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!

  • Mr_Freeze

    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

    Sorry forgot to paste the code.
    ( )

  • http:/www.dlocc.com Devin Walker

    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!

  • Mr_Freeze

    I got it!

    .ms-titlearea { display:none; }

    Thanks

  • http:/www.dlocc.com Devin Walker

    Good Job!

  • atlrunner

    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.

  • http:/www.dlocc.com Devin Walker

    I mean wrap in tags

  • http://jfwhome.com John Wells

    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.

  • http://jfwhome.com John Wells

    it stripped a tag. The first sentence should read “You do realise that style tags must be included in the head of the document”

  • http:/www.dlocc.com Devin Walker

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

  • Chuck Duncan

    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

    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.

  • Marc Lopez

    <!– Here is what is meant by the style code:

    td.ms-titlearea { display:none; }

  • Marc Lopez

    Oops, its not allowing here is what is meant by the style code:
    Type:
    Type: td.ms-titlearea { display:none; }
    Type:

  • Marc Lopez

    Try this again, its not showing everything I’m typing. Here is what is meant by the style code:
    Oops, its not allowing here is what is meant by the style code:

    td.ms-titlearea { display:none; }

    But remove the !–

  • Marc Lopez

    Use this but instead of the caret use the left and right Guillemets or angle quotes

    ^style type=”text/css”^
    td.ms-titlearea { display:none; }
    ^/style^

  • Douglas Echaiz

    This is the whole required entry:

    .ms-titlearea { display:none; }

  • Jmlebla1

    The original post did not remove the offensive breadcrumb. I went to view -> source and looked through the HTML and found that the breadcrumb was part of the “ms-pagebreadcrumb” class…Huh!
    So I altered the line above to look like

    td.ms-pagebreadcrumb { display:none; }

     and put it inbetween style tags and it worked great!

    Morale of the story is it will work… but you may have to do a little digging….