Which code to use for breadcrumbs and best way to customize them

[Matthew J. Horn]

There seem to be at least 3 ways to get breadcrumbs into the "header" DIV of the Main Layout file:

1. $!sitemeshPage.getProperty("page.breadcrumbs")
2. #parse ("/pages/page-breadcrumbs.vm")
3. #breadcrumbs()

#1 is the default. It's nice. Not thrilling, but nice. Example:

Dashboard > Core Doc > Home > Plug-ins > Plug-In Application Framework

#2 does not work well. Example:

Dashboard > com.atlassian.confluence.core.ConfluenceActionSupport.action.name

I've seen a couple mentions of this issue out there, but admit I haven't understood what the problem is. Maybe something about the context.

#3 works well, and I have figured out that if I modify the confluence/breadcrumbs.vm file, then I can play with the output. Example:

Dashboard > Core Doc > Home > Plug-ins > Plug-In Application Framework

So, my questions, though, are:

1) What's the best way to do it? Obviously, #1 or #3 seem good.

2) Why does modifying the confluence/breadcrumbs.vm file NOT affect #1?

3) Why are there 11 different VM files with the name "breadcrumb" in them in various subdirectories of the confluence directory?

4) How to change the style? I want the breadcrumb text to be blue on a white background.

5) How to change the separator? I want to use a / instead of a >.

Thanks for any insight.

matt

[Nicolas Casel]

Hi @Matthew J. Horn ,

Thanks for these useful tips.

For each breadcrumb, I would like to add the current page title. I've checked the 'breadcrumbs.vm' file but I can't locate where it dynamically builds the breadcrumb path.

Any idea IT Support Atlassian ?

[Felipe Kuze De Boni]

That's how I was able to customize it for my needs, having full html control.

main-layout (placeholder div)

#if($sitemeshPage.getProperty("page.custom-breadcrumbs"))
 <div class="custom-breadcrumbs">
   $!sitemeshPage.getProperty("page.custom-breadcrumbs")
 </div>
#end

page-layout (breadcrumbs)

#if ($mode == "view")
 #requireResource("confluence.web.resources:breadcrumbs")
 #if (!$breadcrumbsId)
 #set ($breadcrumbsId = "breadcrumbs")
 #end
 <content tag="custom-breadcrumbs">
 #set ($breadcrumbs = $helper.breadcrumbs)
 #set ($numCrumbs = $breadcrumbs.size())

 #set ($ellipsisCrumbs = $helper.getEllipsisCrumbs($breadcrumbs))
 #set ($ellipsisShown = false)

 <ol id="$breadcrumbsId">
 <li class="first">
 <a href="$req.contextPath">Home</a>
 </li>
 <li >
 <a href="$req.contextPath/display/$space.key">$space.name</a>
 </li>
 #foreach( $breadcrumb in $breadcrumbs )
 #if ( $velocityCount > 2 )
 <li>
 <a href="$req.contextPath$breadcrumb.target">$breadcrumb.displayTitle</a>
 </li>
 #end
 #end
 </ol>
 </content>
#end

And to change the breadcrumbs separator, it's just CSS...

#breadcrumbs li:before {
  content: ''; /* Put whatever you want here */
}

[Matthew J. Horn]

I'll answer part of this myself: To change color of the breadcrumb background and the breadcrumb text, use the Admin panel > Color Scheme. Then change the value of the Top Bar and the Breadcrumbs Text colors.

[Matthew J. Horn]

In the interest of bumping this thread, and providing some small addition bits of info, I can change the separator by editing the image files in the \confluence\images\decoration directory. Specifically, the white_breadcrumbs_indicator.png file defines the little ">" in the breadcrumb trail. Haven't bothered to look into why there are a dozen or so other files in there, too, with breadcrumb in the name...

[Matthew J. Horn]

Yet another bump. Come on, Atlassian! There are almost 400 views of this thread and not one person wants to take a stab at it?!

In further interest of providing small bits of info, the #breadcrumbs() macro calls $!sitemeshPage.getProperty("page.breadcrumbs"), so that's why they do the same thing.