How to add a topic in top nav in a specific category?

[Francois_Douville (François Douville)]

I want to add a topic to a top menu but not on all categories, just a specific one.
What code should I write?
Thanks

[Francois_Douville (François Douville)]

Found those topics but none of them was for a specific category…

https://meta.discourse.org/t/how-to-add-external-link-on-top-menu/9508/6

Add button to top navigation bar

I’m developing a plugin which needs to be able to append an extra button to the top navigation bar: list-controls > .container > div > .ul.nav I also need to remove the new-topic button at the far right. What is the proper way to do this? Plugin.rb? Javascript?

https://meta.discourse.org/t/best-way-to-customize-top-menu/35336

https://meta.discourse.org/t/after-add-a-link-to-top-menu-how-can-custom-the-link-showed-on-mobile/20679

Categories in "top menu"?

You know the URLs that you want to link to, right? You just want to add those links to the top of your page? I’m pretty sure that this is what you’re looking for. Go to admin/settings/customize/css and put in the links you want. Below is an example. From: “read me first: quick admin guide” on your site (it requires admin access, so I can’t link to it here)

[awesomerobot (Kris)]

Tested this solution a bit more (modified from this post) try this (replace “Travel” with your category name):

<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });

  I18n.translations.en.js.filters.bugs = { title: "Bugs", help: "Open Bugs" };
  I18n.translations.en.js.filters.google = { title: "Google", help: "Navigate to Google" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var list = this._super(category, args);
      if(category && category.name == "Travel") {
        list.push(Discourse.ExternalNavItem.create({href: '/category/bug', name: 'bugs'}));
        list.push(Discourse.ExternalNavItem.create({href: 'https://google.com', name: 'google'}));
      }
      return list;
    }
  });
</script>

[Francois_Douville (François Douville)]

Maybe a bug with translation [fr.filters.Liste.title]

And is it possible to move it here?

[dax (Daniela)]

I18n.translations.en.js.filters.bugs = { title: "Bugs", help: "Open Bugs" };
I18n.translations.en.js.filters.google = { title: "Google", help: "Navigate to Google" };

Those are for english based forum…

Your forum is french so use I18n.translations.fr instead

[Francois_Douville (François Douville)]

@dax

Your forum is french so use I18n.translations.fr instead

Still the same thing with translations.fr

<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });

  I18n.translations.fr.js.filters.liste = { title: "Liste", help: "Liste des formations" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var list = this._super(category, args);
      if(category && category.name == "Formations") {
        list.push(Discourse.ExternalNavItem.create({href: '/t/liste-2-0-des-formations-sur-lautosuffisance-et-la-consommation-ecoresponsable-en-2018/306', name: 'Liste'}));
      }
      return list;
    }
  });
</script>

[awesomerobot (Kris)]

Try name: 'liste'instead

[Francois_Douville (François Douville)]

It’s working, perfect! Doesn’t matter if it’s here. Thanks so much!

[Andy02 (Andy)]

Where has that lovely calendar come from??

[HeyRR]

This seems no-longer works after deprecation of Discourse.NavItem , and someone mentioned in this post that Custom top navigation links can do the trick:

Custom nav items no longer showing after recent update

I use this code (in the /head tab of the edit CSS/HTML customisation page) to add some additional items to the menu, however it’s stopped working after a recent update - anybody know why? <script> Discourse.ExternalNavItem = Discourse.NavItem.extend({ href : function() { return this.get('href'); }.property('href') }); I18n.translations.en.js.filters.first_name_here = { title: "Name", help: "Name again" }; I18n.translations.en.js.filters.second_name_here = …

However, this component does not dynamic link where you want to check the link url based on current location.
For my use-case, I want to set different link for mainpage and sub-categories, e.g. to show an unfinished/finished tag filter nav item based on current categories, I used to able to use below code but now is not working:

<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });

  I18n.translations.en.js.filters.unfinished = { title: "tbc", help: "placeholder" };
  I18n.translations.en.js.filters.finished = { title: "finished", help: "placeholder" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var list = this._super(category, args);
      var url = category ? category.url : "";
      // Main menu and 2 specific categories will have those 2 nav items with different url
      if(!category || (category && url && (url.includes("mix") || url.includes("other")))) {
        var tbc_url = category ? "/tags" + url + "/tbc" : "/tags/tbc";
        var finish_url = category ? "/tags" + url + "/finished" : "/tags/finished";
        
        list.push(Discourse.ExternalNavItem.create({href: tbc_url, name: 'tbc'}));
        list.push(Discourse.ExternalNavItem.create({href: finish_url, name: 'finish'}));
      }
      return list;
    }
  });
</script>

Can someone help me on how can I update this code based on current navigation-item component? Or a more general question, how can I find the current usage of the replacement of Discourse.NavItem?

Thanks!

[bekircem]

Is it still works? It didn’t work when I tried it, should we add a plugin version?