Skip to end of metadata
Go to start of metadata

This short tutorial shows you how to style the breadcrumbs

The Breadcrumbs are built from an ordered list eg:

<span class="breadcrumbs">
  <ol class="breadcrumbs ellipsis" id="breadcrumbs.list">
    <li class="breadcrumb breadcrumb0 dashboardbreadcrumb"><a href="/dashboard.action">Dashboard</a>&nbsp;&gt;</li>
    <li class="breadcrumb breadcrumb1 spacebreadcrumb"><a href="/display/Docu">Documentation Intranet</a>&nbsp;&gt;</li>
    <li class="breadcrumb breadcrumbsExpansion breadcrumb2 pagebreadcrumb"><a href="/display/Docu/Home">Home</a>&nbsp;&gt;</li>
    <li class="breadcrumb breadcrumbsEllipsis breadcrumb2"><a href="javascript:void(document.getElementById('breadcrumbs.list').className = 'breadcrumbs expanded');" title="$3">...</a>&nbsp;&gt;</li>
    <li class="breadcrumb breadcrumb3 pagebreadcrumb"><a href="/display/Docu/Breadcrumbs+CSS">Breadcrumbs CSS</a></li>
  </ol>
</span>

The ellipsis works by adding a classname to the ordered list which switches between two sets of css, one where the expansion is hidden and the ellipsis visible, the other with the ellipsis hidden and the expansion visible.

You can use the following CSS classes to customise your breadcrumb trail

Class

Notes

.breadcrumbs

Wrapper for entire breadcrumb trail

.breadcrumb

All breadcrumbs in the trail

.breadcrumbs li

The list ltems in the 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)

.breadcrumb3

All subsequent breadcrumbs have a unique number (eg. 3, 4, 5, etc.) so you can customise any level of the trail

.dashboardbreadcrumb

The breadcrumb that links to the dashboard

.spacebreadcrumb

A breadcrumb that links to a space

.pagebreadcrumb

A breadcrumb that links to a page, blogpost, etc.

To style the entire breadcrumb trail simply use the breadcrumb class

 /* breadcrumbs "yellow" background color */
 .breadcrumb {
  background-color: #ffff00;
 }

If you want to style any of the individual links just use the breadcrumb class and add an appropriate number for the link. The breadcrumb trail is 0-indexed so to style the first two breadcrumb links do the following:

 /* dashboard link "green" background color */
 .breadcrumb0 {
  background-color: 00ff00;
 }
 
 /* space link "white" background color */
 .breadcrumb1 {
  background-color: #ffffff;
 }

The .breadcrumb, .breadcrumb0, .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 breadcrumb links */
 .breadcrumbs a:link {
  color: #ff0000;
 }

 /* black text when hovering over a link */
 .breadcrumb a:hover {
  color: #000000;
 }

 /* blue text when a link has been visited */
 .breadcrumbs a:visited {
  color: #0000ff;
 }

If you look at the breadcrumb trail above, you will see these styles applied. If you need to hide the breadcrumb trail, remove the {builder-breadcrumbs} macro from the panel content. And if you want to hide any of the first three items on the breadcrumb trail, use Breadcrumb Options on the Options Tab in the Layout Manager.

(lightbulb) We've applied this example to this page using the style macro.

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

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

  • No labels

1 Comment

  1. Unknown User (davidchapmanattpt)

    The $3 in the title doesn't seem to actually expand to the value of it. So when I mouse over it, it shows $3 instead of the page.