nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Accepted answers

Matthew J. Horn

Asked and answered.

All comments

Matthew J. Horn

Asked and answered.

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!

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.

Jay McCormack

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

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 North1

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.

Mikael Mikkola

Confluence 5.7: how to remove space name from the breadcrumps

Confluence Admin > Look and Feel > Custom HTML
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

Space Admin > LOOK AND FEEL > Stylesheet
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:

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

Produce the macro at

Confluence Admin > Configuration > User Macro > Create a User Macro
Fill in the name and title (maybe both "myspace"), leave "No macro body"
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.)

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.

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.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

breadcrumbs