Implementing Custom UI For BreadCrumbs

Todd Battreall asked on September 13, 2016 06:20

I have added the Breadcrumbs Web Part to my page and I would like to change what is rendered. Currently the BreadCrumb is rendered as <a href="/Products/Pumps-and-Process-Equipment.aspx" class="CMSBreadCrumbsLink">Products</a> > <span class="CMSBreadCrumbsCurrentItem">Valves and Valve Automation</span>. I would like it to look like this when it is rendered
<ol class="breadcrumb csg-breadcrumbs__breadcrumb"> <li><a href="#">Products</a></li> <li class="active">Valves and Valve Automation</li> </ol> Is this possible and how so?

Kentico Version: 9.0

breadcrumbs

Correct Answer

Brenden Kehren answered on September 13, 2016 06:40

I wouldn't use the Breadcrumbs webpart, I'd use the CMSRepeater webpart as you have a lot more flexibility with the markup and how you can control what is output. With the Breadcrumbs webpart it involves some custom code and it is not very flexible.

0 votesVote for this answer Unmark Correct answer

Recent Answers

Jan Hermann answered on September 13, 2016 08:17

I agree with Brenden, but if you really want to customize the Breadcrumbs web part, you can find entire HTML code it renders in the bcElem.RenderedHTML property and change it within the OnPreRender event.

1 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on September 13, 2016 16:15

Todd, I did what Jan mentioned a while back in v7. You can check out the wepart here on the Marketplace.

0 votesVote for this answer Mark as a Correct answer

Chetan Sharma answered on September 13, 2016 16:39

Agree with Brenden, If you want flexibility use any repeater and use that to generate layout.

If you are okay changing code behind then changing web-part could be an option.

The former option will give you greater flexibilty.

0 votesVote for this answer Mark as a Correct answer

Todd Battreall answered on September 14, 2016 05:00 (last edited on December 10, 2019 02:30)

Hey Guys! Thanks for the quick response!! I did end up using the repeater with a custom transformation. The transformation looks like this.... {% if (CurrentDocument.DocumentGUID == DocumentGUID) { %} <li><a href="/">Home</a></li> <li><a href="{% CurrentDocument.Parent["AbsoluteUrl"].ToString() %}">{% CurrentDocument.Parent["DocumentName"].ToString() %}</a></li> <li class="active">{% MenuItemName.ToString() %}</li> {% } |(identity)GlobalAdministrator%}

0 votesVote for this answer Mark as a Correct answer

Trevor Chinn answered on October 20, 2016 04:07 (last edited on December 10, 2019 02:30)

I ended up wanting to do a similar thing, but I just did the following... I wonder if it has any repercussions that I haven't noticed. I just threw it in a static HTML part.

{% for (i = 0; i < CurrentDocument.DocumentsOnPath.Count; i++) { %}
  {% if (i == 0) { %}
  <a href="~/">Home</a>
  {% } else { %}
    {% if (i < CurrentDocument.DocumentsOnPath.Count - 1) {  %}<a href="{% CurrentDocument.DocumentsOnPath[i].NodeAliasPath %}">{% } %}{% CurrentDocument.DocumentsOnPath[i].DocumentName %}</a>
  {% } %}
  {% if (i < CurrentDocument.DocumentsOnPath.Count - 1) { " > " } #%}
{% }  |(identity)GlobalAdministrator%}

It's probably not the cleanest, but I wanted to avoid the hassle of setting up a repeater and transformation for something that seemed like it should be quite simple to accomplish

1 votesVote for this answer Mark as a Correct answer

Greg Laycock answered on March 22, 2017 15:25

What did you end up using for your path expression in the repeater? I'm facing a similar situation and haven't yet figured out how to traverse up the tree rather than down the tree via a repeater. Thanks!

0 votesVote for this answer Mark as a Correct answer

Todd Battreall answered on March 23, 2017 03:29

I just used /% for my path.

0 votesVote for this answer Mark as a Correct answer

Unal UN answered on April 2, 2018 14:04

hi not working can you help please ?

0 votesVote for this answer Mark as a Correct answer