Remove redundant breadcrumbs

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

6 answers

1 accepted

Comments Closed
Accepted Answer
1 vote

Asked and answered.

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!

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!

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.

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", "question" 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.)

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

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();
}

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.

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

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.

Community showcase
Posted Oct 11, 2018 in Confluence

What are your project planning tips?

Hello Community,  Jessica here from the Confluence product marketing team! Today I wanted to get your takes on project planning –– what works, what doesn’t, how do you know if you’re doing it r...

293 views 1 4
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you