Looking a bit more into this, a breadcrumbs component has been added to Discourse earlier this year: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. It’s currently only rendered on select Admin pages.
So I had done a test component to render breadcrumbs: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. The current template is:
<template>
{{#if this.currentPage}}
{{bodyClass "has-breadcrumbs"}}
<ul class="breadcrumbs {{concat '--' settings.plugin_outlet}}">
<li class="breadcrumbs__item --home">
{{#if this.homePage}}
{{i18n "js.home"}}
{{else}}
<a href="/">{{i18n "js.home"}}</a>
{{/if}}
</li>
{{#if this.parentCategory}}
<li class="breadcrumbs__item --parent">
<a href="/c/{{this.parentCategoryLink}}">
{{this.parentCategoryName}}</a>
</li>
{{/if}}
{{#unless this.homePage}}
<li class="breadcrumbs__item --current">
{{this.currentPage}}
</li>
{{/unless}}
</ul>
{{/if}}
</template>
I did a branch now that uses the new dbreadcrumbs component: Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. That would make the template more concise and I guess generally provide better consistency and accessibility:
<template>
{{#if this.currentPage}}
{{bodyClass "has-breadcrumbs"}}
<DBreadcrumbsContainer class="{{concat '--' settings.plugin_outlet}}" />
<DBreadcrumbsItem @path="/" @label={{i18n "js.home"}} />
{{#if this.parentCategory}}
<DBreadcrumbsItem
@path="/c/{{this.parentCategoryLink}}"
@label={{this.parentCategoryName}}
/>
{{/if}}
{{#unless this.homePage}}
<DBreadcrumbsItem @path="" @label={{this.currentPage}} />
{{/unless}}
{{/if}}
</template>
However, using DBreadcrumbsItem, the order of parent-category and sub-category gets mixed up on the rendered component. The current category is inserted first:
I wonder if it’s because of that behavior, stated on the commit message?
- DBreadcrumbsItem - The component that registers a LinkTo
for the breadcrumb trail. The breadcrumb > trail > will
show based on the order these items are rendered on the page.