Page History

{excerpt}This short tutorial shows you how to style the breadcrumbs{excerpt}

h2. HTML Structure

The Breadcrumbs are built from an ordered list eg:
{style}
.code {width:700px;}
{style}
{code}
<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>
{code}

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.

h2. CSS Customisation

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

||Class||Notes||
||.breadcrumbs|Wrapper for entire breadcrumb trail|
||.breadcrumb|Breadcrumb 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??)|

To style the entire breadcrumb trail simply use the _breadcrumb_ class
{code}
 /* breadcrumbs "yellow" background color */
 .breadcrumb {
  background-color: #ffff00;
 }
{code}

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:
{code}
 /* dashboard link "green" background color */
 .breadcrumb0 {
  background-color: 00ff00;
 }
 
 /* space link "white" background color */
 .breadcrumb1 {
  background-color: #ffffff;
 }
{code}

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:

{code}
 .breadcrumb0 a:link {
  your styles here
 }
{code}

The link tags allow you to use different customisations depending on whether the link has been visited, etc:
{code}
 /* 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;
 }
{code}

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

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 [USERGUIDE:Breadcrumb Options] in theme configuration.

(on) We've applied this example to this page using the -AtlassianConfluence:style macro-.

h2. 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|Theme Configuration 2.x-.
* 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.

{style}
.breadcrumb {
 background-color: #ffff00;
}
 
.breadcrumb0 {
 background-color: #00ff00;
}
 
.breadcrumb1 {
 background-color: #ffffff;
}

.breadcrumbs li a:link {
 color: #ff0000;
}

.breadcrumbs li a:hover {
 color: #000000;
}

.breadcrumbs li a:visited {
 color: #0000ff;
}
{style}