Best way to customize top menu


(John ) #1

I can see that even this site is using some top menu customizations to link to specific filters.

I’d like to be able to

A. link to custom paths within our discourse instance,
B. link to external sites.

There seem to be a few options:

  1. Seems a bit heavy on JS for something this simple:
  1. Despite the very specific name, it appears to cover the use case of internal links, though not external.

What’s the best way to do this?

Able to use the 'extraNavItem' custom html outlet?
Looking for "Dev Tracker" Mod/Plugin
How to add a topic in top nav in a specific category?
(Jeff Atwood) #2

@techapj could you post some examples of both requests here?

Unread topics in query-link-lists tracking/watching
(Arpit Jalan) #3

Here’s the JS you are looking for:

  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');

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

    buildList : function(category, args) {
      var list = this._super(category, args);
      if(!category) {
        list.push(Discourse.ExternalNavItem.create({href: '/category/bug', name: 'bugs'}));
        list.push(Discourse.ExternalNavItem.create({href: '', name: 'google'}));
      return list;

Paste the above JS in CSS/HTML <body> section and it will create two additional links in top menu:

  • Bugs (an internal category link)
  • Google (external link that navigates to Google)

Categories in "top menu"?
Have Latest feed only show Watched categories?
Discourse Solved (Accepted answer plugin)
Plugin Questions: TopNav Dev Group Tracker
How to add a topic in top nav in a specific category?
Discourse Solved (Accepted answer plugin)
Adding Unsolved button to top menu using custom HTML
Can we have "Groups" as a clickable icon?
How to add a topic in top nav in a specific category?
Group Semantics
(Sebastian) #4

lots of code to achieve a link :wink:

(Jeff Atwood) #5

If you just want a link on the page header you can use admin, customize, html. In this case a link perfectly integrated with the Discourse nav menu was requested…

(Daniela) #6

Just change this string
I18n.translations.en.js.filters.bugs = { title: "Bugs", help: "Open Bugs" };
with { title: "Bugs", help: "Open Bugs" }; and it works with italian language.

Thanks Discourse Team.

(Daniela) #8

A quick question… is it possible add target="_blank" to the external link?

e.g. here:
list.push(Discourse.ExternalNavItem.create({href: '', name: 'google'}));

(Matt Landseadel) #9

I know this is old, but thank you so much @techAPJ for posting the JS to do this. Everyone seems like they’re floundering around with crazy, messy ways to do this. THANKS!

(Chris Beach) #10

I’m very nervous about using custom JS - it won’t be automatically tested during the upgrade process and a JS error might break the forum UI.

I’d prefer there was a supported admin mechanism for adding links to the header bar or hamburger menu.

(Joshua Rosenfeld) #11

This request just came up on my site. Is it possible to have a link added with the above code open in a new tab @techAPJ?

(Arpit Jalan) #12

I looked into NavItem model and navigation-item component and I don’t think it’s supported yet.

I will see if there is a possibility to do this via custom JS.