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

**URL:** https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028
**Category:** Support
**Created:** [9 mei 2018 om 01:59 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028 "2018-05-09T01:59:47Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [9 mei 2018 om 01:59 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/1 "2018-05-09T01:59:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [10 mei 2018 om 11:44 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/2 "2018-05-10T11:44:13Z")

</div>

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](https://meta.discourse.org/t/how-to-add-external-link-on-top-menu/9508/6)

> [@Add button to top navigation bar](https://meta.discourse.org/t/add-button-to-top-navigation-bar/49552):
>
> 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/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](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"?](https://meta.discourse.org/t/categories-in-top-menu/41718/10):
>
> 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)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [10 mei 2018 om 14:29 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/6 "2018-05-10T14:29:59Z")

</div>

Tested this solution a bit more (modified [from this post](https://meta.discourse.org/t/best-way-to-customize-top-menu/35336/3)) try this (replace “Travel” with your category name):

```JS

<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>

```

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [10 mei 2018 om 14:35 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/7 "2018-05-10T14:35:20Z")

</div>

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

And is it possible to move it here?

 ![36](https://global.discourse-cdn.com/meta/original/3X/2/4/244615f92247094a262207f91cd6d9c9b2ad4ee4.png)

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [10 mei 2018 om 14:37 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/8 "2018-05-10T14:37:38Z")

</div>

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 forums…

Your forum is French, so use `I18n.translations.fr` instead.

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [10 mei 2018 om 14:41 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/9 "2018-05-10T14:41:36Z")

</div>

> [@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>

```

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [10 mei 2018 om 14:45 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/10 "2018-05-10T14:45:57Z")

</div>

Try `name: 'liste'`instead

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [10 mei 2018 om 14:48 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/11 "2018-05-10T14:48:58Z")

</div>

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

 ![46](https://global.discourse-cdn.com/meta/original/3X/2/0/20f7afdcbb32938cac5f9a791c51ff949c5f4c49.png)

---

<div class="post-metadata">

### Author: ![Andy02](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andy02/32/119498_2.png) [@Andy02](https://meta.discourse.org/u/Andy02)
#### Post date: [17 september 2019 om 23:18 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/12 "2019-09-17T23:18:26Z")

</div>

Where has that lovely calendar come from??

---

<div class="post-metadata">

### Author: ![HeyRR](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heyrr/32/192157_2.png) [@HeyRR](https://meta.discourse.org/u/HeyRR)
#### Post date: [25 juli 2020 om 19:52 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/14 "2020-07-25T19:52:06Z")

</div>

This seems no-longer works after deprecation of `Discourse.NavItem` , and someone mentioned in this post that [Custom top navigation links](https://meta.discourse.org/t/custom-top-navigation-links/87225) can do the trick:

> [@Custom nav items no longer showing after recent update](https://meta.discourse.org/t/custom-nav-items-no-longer-showing-after-recent-update/133838):
>
> 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:

```JavaScript
<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!

---

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [20 februari 2021 om 12:21 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/15 "2021-02-20T12:21:03Z")

</div>

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

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [8 juni 2024 om 12:37 UTC](https://meta.discourse.org/t/how-to-add-a-topic-in-top-nav-in-a-specific-category/87028/16 "2024-06-08T12:37:00Z")

</div>

This topic was automatically closed after 2222 days. New replies are no longer allowed.