Remove redundant breadcrumbs

[Matthew J. Horn]

I had a long-standing issue with the breadcrumbs in Confluence showing up twice -- once for the space name and once for the home page. So, for a space called "Documentation", you'd get:

Dev Center > Documentation > Home

In this case, the "Documentation" and "Home" links would go to the exact same place.

After learning a little more jQuery, I was able to remove the "Home" breadcrumb by adding the following line in my Custom HTML "HEAD" section in the Admin panel:

AJS.$('#breadcrumbs li').eq(2).remove();

This basically removes the 3rd list item (li) in the unordered list (ul) called breadcrumbs.

Hope this helps someone else. 

matt

[Matthew J. Horn · Accepted solution]

Asked and answered.

[Mikael Mikkola]

Confluence 5.7: how to remove space name from the breadcrumps

1. Confluence Admin > Look and Feel > Custom HTML
2. To "At the end of BODY" add the following code (e.g., immediately after the first line "<script>"):
   AJS.$('#breadcrumbs li').eq(0).remove();

Replace eq(0) by eq(1) or the like to remove the home page name instead.

-"-: just in a single wiki space

1. Space Admin > LOOK AND FEEL > Stylesheet
2. Add the following code:
   

   #breadcrumbs .first{ display:none; }

   #breadcrumbs li::before { content: ""; display: inline-block; padding: 0 0 0 0; }

   #breadcrumbs li::after{ content: "/"; padding: 0 2px 0 4px; }

-"-: using a macro?

To control numerous wiki spaces at once (but not all), you can make it obey a macro:

1. Space Admin > LOOK AND FEEL > Themes
2. Select "Documentation Theme" if not already selected.
3. Click its "Configure Theme".
4. To navigation, write:
   {myspace}
   (or whatever you select to be your macro name).

Produce the macro at

1. Confluence Admin > Configuration > User Macro > Create a User Macro
2. Fill in the name and title (maybe both "myspace"), leave "No macro body"
3. Template: remove everything below "## Installed by: My Name" and add there the following code:
   

   <script>

   AJS.$(document).ready(function() {

   AJS.$(".first").hide();

   AJS.$(".second").hide();

   });
   </script>

This works (and the ".second" line seems to be unnecessary), but has the nasty side-effect that the "Browse", "" and wheel drop-down-menus become empty. How to solve that?

The above code AJS.$('#breadcrumbs li').eq(0).remove(); had no effect.

The "just in a single wiki space" code had no effect except the nasty side-effect.

(Credit: all the above codes are from this space, mainly by Eric Riddle and Kenn North. I just (C5.7-tested them and) wanted to make them accessible to a wider audience.)

[Ruby Singh]

Thank you so much for this post, I have been searching for ages for something that's clear and comprehensively explained. Much appreciated.

[Eric Riddle]

I had to put this at the END OF BODY section rather than the HEAD, for Confluence 4.2

As Matt mentioned, you can modify it to remove other breadcrumbs by changing the eq(2) to another number. For example, the following:

    AJS.$('#breadcrumbs li').eq(0).remove();

Will remove the "Dashboard" breadcrumb. "0" is the first breadcrumb, "1" is the second, and so on.

I also modified it to only respond to users who were not logged in:

<script>
if (AJS.$('#login-link').is(":visible")) {
    AJS.$('#breadcrumbs li').eq(0).remove();
}
</script> 

The above script will hide the dashboard link for a user who is not logged in. 

Useful if you want to keep people in a specific space!

[sabina_szablowska]

In Confluence 5.7 this worked for me when i added it at the END OF BODY as well. Does anyone know if this can be done but only for specific spaces and not globally? Thanks for the tip!

[Kenn North]

Within a specific space I added this to the CSS for that space #breadcrumbs .first{ display:none; } #breadcrumbs li::before { content: ""; display: inline-block; padding: 0 0 0 0; } #breadcrumbs li::after{ content: "/"; padding: 0 2px 0 4px; } It's not perfect, but it looks reasonable with very little effort.

[Bruce Michelsen]

I would like to only remove a breadcrumb when there's redundancy. In pages that are not hierarchically under the home page, I don't want to remove a breadcrumb with out checking for redundancy.

This works:

AJS.$('#breadcrumbs li').eq(2).remove();

But I want something like this:

if (AJS.$('#breadcrumbs li:eq(2)').is(":contains('My Space Home')"))
    AJS.$('#breadcrumbs li').eq(2).remove();
}

[Matthew J. Horn]

BTW, I decided to completely rewrite the breadcrumb VM file instead of using jQuery to hack the way they are drawn. They are now much easier to work with and debug.

[Nancy Jaiswal]

Our plugin Space Hierarchy & Breadcrumbs show the breadcrumbs having single entry of each space. It also provides option to create space hierarchy and breadcrumbs at top of page follow that hierarchy. you can try it to find if it suits your requirements.

[Jay McCormack]

Just chiming in to say 'thanks' - did the trick for me.