{builder-breadcrumbs} Macro

Description

TipNote:
The actual breadcrumbs are always output, regardless of where this macro is placed and even if it is removed, at the bottom of the web page. This aids search engine rankings by ensuring links are present to the parent page whilst not prioritising the breadcrumb trail over the main content of your pages.

...

{builder-breadcrumbs}

Note:
This macro can only should be used inside panels only once, usually inside a panel within the theme configuration screen. You cannot use it in pages or news articles, etc.

Parameters

This macro has no parameters.

...

If you want to hide the breadcrumb trail, simply delete the {builder-breadcrumbs} macro from the panel content.

If you want to hide any of the first three items on the breadcrumb trail, use Breadcrumb Options in theme configuration.

The .breadcrumb, .breacrumb0, .breadcrumb1 and .breadcrumb2 classes include both the breadcrumb link and the arrow to the right of it, eg. .breadcrumb0 includes Dashboard > - if you want to customise just the link, apply your settings to the link tag within that region, eg:

.breadcrumb0 a:link {
 your styles here
}

The link tags allow you to use different customisations depending on whether the link has been visited, etc:

/* red text by default for all breadcrumbs */
span.breadcrumbs a:link {
 color: #ff0000;
}

/* blue text when hovering or if link visited */
span.breadcrumbs a:hover, span.breadcrumbs a:visited {
color:#0000ff;
}

/* dashboard link "cyan" background color */
.breadcrumb0 {
 background-color: cyan;
}

/* first three breadcrumbs bold */
.breadcrumb a {
 font-weight: bold;
}

/* red text by default for all breadcrumbs */
span.breadcrumbs a:link {
 color: #ff0000;
}

/* blue text when hovering or if link visited */
span.breadcrumbs a:hover, span.breadcrumbs a:visited {
color:#0000ff;
}

/* dashboard link "cyan" background color */
.breadcrumb0 {
 background-color: cyan;
}

/* first three breadcrumbs bold */
.breadcrumb a {
 font-weight: bold;
}

.breadcrumb0 {
 display: inline;
 visibility: visible;
}

If you look at the breadcrumb trail above, you will hopefully see these styles applied

You will notice that the "...", when expanded, results in the Home link not being bold - this is because the ... is treated as the second breadcrumb (.breadcrumb1 as they are 0-indexed) and it is completely replaced by new text when expanded.

Hints and Tips

You can remove any of the first three items in the breadcrumb trail using the options:

• Builder 1.x and 2.x: Navigation panel settings.
• Builder 3.x and above: Options Tab in Layout Manager

in Theme Configuration. Simply tick which links you want to remove and they'll no longer appear in the breadcrumb trail.

...