Disclaimer: We don't recommend heavily customizing the output of advanced helpers with JavaScript or CSS because their internal implementation might change in the future.
Question
How do I update the breadcrumbs in the Help Center to match a custom Community name?
Answer
If you have a theme using the breadcrumbs helper, you can Update the breadcrumbs in the Help Center to match a custom Community name by utilizing some HTML.
The breadcrumbs are found at the top of many Help Center pages.
There are five Community templates available in the Help Center for editing.
- Community post list page (community_post_list_page.hbs)
- Community post page (community_post_page.hbs)
- Community topic list page (community_topic_list_page.hbs)
- Community topic page (community_topic_page.hbs)
- New community post page (new_community_post_page.hbs)
Update each one of these templates in your Help Center and replace the {{breadcrumbs}}
advanced helper with the codes below.
Note: Create dynamic content items and variants for each of the dynamic content placeholders used below (or feel free to create and replace with your own placeholders). If you decide not to use dynamic content, replace the
{{dc 'community_name'}}
and
{{dc 'new_post'}}with your own text string such as
Discussionsor
Forums.Community topic list page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
</ol>Community topic page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
<li>{{topic.name}}</li>
</ol>Community post list page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
</ol>Community post page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
<li><a href="{{topic.url}}">{{topic.name}}</a></li>
</ol>New community post page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
<li><a href="{{help_center.url}}/community/posts/new">{{t 'new_post'}}</a></li>
</ol>
15 Comments
I want to set the title of my community. Way too hard to do.
Hi Darren,
The easiest change here would be to rename the category to 'Home Page'. I think I found your Help Center and the category name is actually set to Home Page, but it is meant to store FAQs.
If you navigate to the category page and click 'Edit category' you will be able to change the title there, which will impact the breadcrumbs.
Does that help?
Hi there!
I've just commented on this article:
https://support.zendesk.com/hc/en-us/community/posts/115007678168-Help-Center-Tutorial-Add-a-home-icon-to-your-breadcrumb-navigation-
Is there a way to replace the help center name with an icon? So far I noticed the only way is to add an icon.
Thank you very much in advance!
Awesome thanks Jake. That was easy :)
Thanks. I did in fact get this working. What about the word Community in the header however?
Cool! How about just simply changing the name on the main Help Center page?
Hi there, I keep getting this:
What am I doing wrong? Obviously I will customize "community_name" but showing the screenshot, so you know exactly what it looks like.
Hi Bethany,
Have you created a dynamic content item per the "Note" in the yellow box on the article? Once you have created that item with the variants to match your current Help Center locale, it will render the variants you add to your dynamic content.
Is there anyway to edit the text on the Home Page breadcrumb? I believe its on the "category_page.hbs" but can't quite figure out how to change this.
Thanks!
Hi Eric!
The main Help Center title is controlled from the Help Center settings under General > Help Center settings. At the bottom of that setting page, you can set the title of your Help Center. There are even multiple options available if your Help Center is available in more than one language.
Does that help with what you were looking to update?
Hi Jeff Hawley,
Can you share the URL of your HC so that I can take a look at it?
Team Diziana
Hey Eric!
Jake mentions this briefly in his article, but I can provide you with some additional detail.
Provided that you're not on the Starter or Essential plan, you have access to customize the code in your Help Center. This is where you'll go to customize your Community name.
In your Help Center, go to General > Customize design, and then click Edit theme. This will take you to the theme editor.
From there, you'll select the Community topic list page from the drop down menu above the code window. The following screenshot will show you where the Community title is:
Remove the aqua-colored t and the spaces that follow it. Then change community inside the brackets and apostrophes to whatever you want your Community name to be:
Remember to leave the brackets and apostrophes, or it won't work! Click Preview and you'll see what it'll look like in real life before you save the change.
Depending on what theme you're using you may see a slight variation in the code and which line the title appears on, but the general idea will be the same.
We always recommend that you proceed with caution when making any alterations to your Help Center code. Once you start making changes, your Help Center is considered custom and our Support team might not be able to help you if something breaks. When in doubt, ask for help! We have several Help Center gurus here in the Community who can help you out.
Hi Trapta - I did what you mentioned with the CSS and now I get this huge spacing below the breadcrumbs and above the title. How do I fix that? Seems to be something with the display:flex but I can't get the inline-block to work properly because it will extend the category and section out to the right because of the hidden text...
Hi Eric,
Which Header? Do you have a screenshot? All of the themes are pretty different, so it would be very helpful to know the context.
I'd be happy to have a look.
Hi @Manuel,
Try below code by pasting it at the bottom of your style.css file:
.breadcrumbs, .breadcrumbs li {display: flex;}
.breadcrumbs li:first-child > a {
color: transparent;
width: 15px;
}
.breadcrumbs li:first-child > a:before {
color: #000;
font-family: "entypo";
content: '\2302';
}
Let me know how it goes for you.
Team Diziana
Please sign in to leave a comment.