Breadcrumbs CSS

This short tutorial shows you how to style the breadcrumbs

HTML Structure

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.

CSS Customisation

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

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.

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

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

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