Page History

h1. \{builder-breadcrumbs} Macro

h2. Description

This macro {excerpt}defines where the breadcrumb trail will appear within the theme layout{excerpt}. You can move this macro to another panel to relocate the breadcrumbs or remove it altogether if you do not want a breadcrumb disaply.

*Tip:*
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.

h2. Usage

{code}
{builder-breadcrumbs}
{code}

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

h2. Parameters

This macro has no parameters.

h2. Examples

Simply add the macro to any panel in theme configuration to display the breadcrumb trail in that panel:

{code}
{builder-breadcrumbs}
{code}

h2. CSS Customisation

||Class||Notes||
||.breadcrumbs|Wrapper for entire breadcrumb trail|
||.breadcrumb|First three links on breadcrumb trail|
||.breadcrumb0|First item on Breadcrumb trail (??Dashboard?? link)|
||.breadcrumb1|Second item on Breadcrumb trail (Space title or other top-level location, eg. ??Search??)|
||.breadcrumb2|Third item on Breadcrumb trail (Orphan page, eg. ??Home??, or global sub-section, eg. ??License Details??)|

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.

When changing the styles of breadcrumbs, remember that they contain link tags allowing you to use different customisations depending on whether the link has been visited, etc:

{code}
/* red text by default for all breadcrumbs */
span.breadcrumbs a, 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 green"lemonchiffon" textbackground for allcolor states */
.breadcrumb0 a, .breadcrumb0 a:link, .breadcrumb0 a:visited {
 background-color: #00ff00lemonchiffon;
}

/* first three breadcrumbs bold */
.breadcrumb a {
 font-weight: bold;
}
{code}
{style}
/* red text by default for all breadcrumbs */
span.breadcrumbs a, 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 green"lemonchiffon" background forcolor all states */
.breadcrumb0 {
 background-color: #00ff00lemonchiffon;
}

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

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

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

h2. Hints and Tips

You can remove any of the first three items in the breadcrumb trail using the Navigation panel settings in Theme Configuration. Simply tick which links you want to remove and they'll no longer appear in the breadcrumb trail.

h2. Frequently Asked Questions

None at present.