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

Question

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

* $!sitemeshPage.getProperty("page.breadcrumbs")
* #parse ("/pages/page-breadcrumbs.vm")
* #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

felipedeboni · Answer

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"))

$!sitemeshPage.getProperty("page.custom-breadcrumbs")

#end page-layout (breadcrumbs) #if ($mode == "view") #requireResource("confluence.web.resources:breadcrumbs") #if (!$breadcrumbsId) #set ($breadcrumbsId = "breadcrumbs") #end #set ($breadcrumbs = $helper.breadcrumbs) #set ($numCrumbs = $breadcrumbs.size()) #set ($ellipsisCrumbs = $helper.getEllipsisCrumbs($breadcrumbs)) #set ($ellipsisShown = false) Home $space.name #foreach( $breadcrumb in $breadcrumbs ) #if ( $velocityCount > 2 ) * $breadcrumb.displayTitle #end #end #end And to change the breadcrumbs separator, it's just CSS... #breadcrumbs li:before { content: ''; /* Put whatever you want here */ }

Nicolas Casel · Answer

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 ?

Matthew J. Horn · Answer

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.