# How to add breadcrumb?

**URL:** <https://meta.discourse.org/t/how-to-add-breadcrumb/223012>\
**Category:** Development\
**Created:** [April 3, 2022, 7:17pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012 "2022-04-03T19:17:28Z")\
**Posts on this page:** 1\
**Showing post:** 27

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\
**Post date:** [October 8, 2024, 9:51am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/27 "2024-10-08T09:51:27Z")

</div>

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](https://github.com/discourse/discourse/commit/1239178f496cba5d864adb7c118b17902b8b72dc). 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](https://gitlab.com/manuelkostka/discourse/components/breadcrumbs). The current template is:

```hbs
  <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](https://gitlab.com/manuelkostka/discourse/components/breadcrumbs/-/tree/dbreadcrumbs). That would make the template more concise and I guess generally provide better consistency and accessibility:

```hbs
  <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:

 ![This image displays a blue-toned background with various texts and icons, creating a user interface that appears to be from a software application. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/6/6/7/667bbe3b29ea3c71477a77053e18dbcf3d965397.png)

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.

---

_[View the full topic](https://meta.discourse.org/t/how-to-add-breadcrumb/223012)._