Breadcrumb Links

[denvergeeks]

	Summary	Breadcrumb Links
	Preview	README
	Repository	GitHub - denvergeeks/discourse-breadcrumb-links: Breadcrumb Navigation for Discourse
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Basic Breadcrumb Links

On all Topic pages: displays links back to the Subcategory (if any) and Category List Pages and the Forum Home…

On all Category and Subcategory List pages: displays links back to the Category List (if on a Subcategory List) and the Forum Home…

Currently there are settings whether or not to:

1. Make the breadcrumbs always remain in view by sticking to the bottom of the header on scroll (defaults to no)

2. Display the breadcrumbs in Mobile (defaults to yes)

Any and all PRs are most welcome!

[Jagster (Jakke Lehtonen)]

Nice, but Forum Home should be translatable and icons are missing.

Could it be a little bit smaller? CSS things, I reckon?

[Aaron_Walsh]

I can confirm that I am also missing the icon.

[Jagster (Jakke Lehtonen)]

On mobiles happends this:

Well, breadcrumb isn’t needed there so taking it off on chats would be nicer solution than fixing CSS?

[Monikas (JustMonika)]

I hope the author can add a feature to modify the name of ‘🡄 Forum Home’!

[denvergeeks]

Thanks for the quick and good feedback, everyone – please do keep it coming – it motivates me to continue learning!

[Aaron_Walsh]

One issue I’m facing with this is that it is showing in the chat box, which makes it very limited to do anything with the default keyboard over the top of the text box.

And secondly, since we are a closed forum, it would be nice to have it taken off the login/sign-up page.

[denvergeeks]

Thanks @Jagster for your bug testing – can you please update it and check again?

[denvergeeks]

Thanks @Aaron_Walsh I’ve made some changes - could you please test the latest version?

[Jagster (Jakke Lehtonen)]

Yeah. Now it is okay.

[Aaron_Walsh]

Hi, @denvergeeks.

Yes. The icon now appears fully and has been removed from the login page. However, it still remains on the chat box, which is still cutting off the default typing box.

As mentioned below, we already have a forum tab that we can click on, so yours could be removed if possible, or an option could be provided to remove it if others don’t want it.

[denvergeeks]

Is your forum open where I can looksie?

[Aaron_Walsh]

Unfortunately, no, it is a closed, private group.

[Jagster (Jakke Lehtonen)]

It works on iPhone and it didn’t show that link either.

[denvergeeks]

I’m not seeing it now in any view of the chat, either on my iPhone, Android phone or in the DiscourseHub app.

On what device and OS are you seeing it?

[Aaron_Walsh]

My apologies, for some reason it didn’t do an update even though it did as others changed but now removed

[nolo (Manuel)]

@denvergeeks I have a skeleton setup for a breadcrumbs component here: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab.

The approach is based on code from the central theme that adds breadcrumbs to some views that don’t show the default drop-downs (discourse-central-theme/javascripts/discourse/connectors/above-main-container/breadcrumbs.gjs at main · discourse/discourse-central-theme · GitHub).

I just re-factored this code for now so that the template follows BEM for styles and is more customizable in general. Also added categories. It won’t render nested categories, or on tag lists or other views for now.

I don’t have immediate plans to work more on this. But I think this is generally a more performant and modern approach, as it doesn’t make ajax calls and is built as a glimmer template. If you feel like, just have a look or give it a try extending it

[denvergeeks]

Hey @nolo thank you, this is super helpful!

Do have any tips or advice about including subcategories in the breadcrumb?

[nolo (Manuel)]

I’d probably try to add a separate getter for parent pages, similar to the currentPage one:

get parentPage() {
...
}

And have another list-item on the template when there’s a parent page:

{{#if this.parentPage}}
  <li class="parent">
    {{this.parentPage}}
  </li>
{{/if}}

[nolo (Manuel)]

…played around with this and added it to the repo already.

I’m not sure if this would be better written with actions? I run into issues when I try it, but I guess that’s because I don’t understand Ember and app states well enough…

In any case, @moderators maybe it would be better to move these few posts to the original dev topic How to add breadcrumb? Rather than here on the component topic?