Custom Top Navigation Links

I’m using this component again on another instance and still have the same issue.

So the component hides the first two nav items with CSS, using the :child pseudo selector. But the “Category” link is only rendered on global lists and not on category lists. So it will then hide the item that comes third on global lists.

I don’t know how to best avoid that. Maybe just drop the setting to hide the default items, as one has to use custom CSS to make it work anyways? Or make a change to core, so the Category-link always shows? In fact, I don’t really grasp the logic why the Category-link disappears when in category lists.

I’m in a Business Plan hosted Discourse and this is not working, I think.

First I tried entering the information for the link as indicated in the instructions:

Comma delimited in this order: link text, link title, URL, view, target, hide on scroll

This did not work. I however noticed how @nolo above wrote it using ; instead of commas and with no spaces. That did make something happen but that something looked liked this:

So the link was added all the way on the top and not next to the other top nav items.

I would be great for my team to make it work. I’m trying to use the Discourse Assign plugin and I thought it would be nice to have a top nav link to all the topics assigned to the current user ( )

there are only 3 settings, but you giving it more which might be an issue.


But the instructions in the component onced installed are much longer:

But I did try as you just said with just name;description;URL
assigned;topics assigned to you;

And it did not work:

try adding this

assigned;topics assigned to you;/latest?assigned=me
1 Like

Hold on, you confusing the two different components.

Custom Header Links & Nav Links Component

Nav Links is the one you looking for


LOL, you are right @IAmGav :sweat_smile: Nevermind, everything works, fake news.


Along with:

  • Hide all (Category & tags) dropdowns

Would it be possible to add:

  • Hide Categories dropdown
  • Hide Tags dropdown

So that each can be hidden separately or together?

There are some warnings/errors after update to 2.9.0.beta2.
Maybe it was before 2.9.0 as I never pay attention earlier.

[Warning] [THEME 6 ‘Nav Links Component’] – “To prevent errors in tests, add a pluginId key to your modifyClass call. This will ensure the modification is only applied once.” (application-02f34826699ddd1471a048c99dbf7e34.js, line 4135, x2)

Does someone know how I could add a tag link that is actually relative to the current route? I’d like to use a tag About and offer it as a top link it to an About-topic relative to the category a user is in.

E.g. user is in category /c/feedback/7. Choosing About will direct to /tags/c/feedback/7/about.

1 Like

I’d like to use the component on an instance but various behavior is not working:

  • When using “hide default links” it’s hiding the first two child items (Latest and Categories). But when one navigates to a category, the default “Categories”- Link is already not shown in the menu. Then this setting hides an additional navigation item, the otherwise third in line.

Screenshot from 2022-05-10 18-29-05

  • I added a menu item for a direct category link (/c/game-talk). When I navigate to it, it doesn’t get an active class and is not highlighted. Instead, the “Latest” link is highlighted and has an active class. This is not the default “Latest” link though, but one I added through the component (only linking to /latest)

  • Actually, the “Latest” link does not get an active class either when it is not named “Latest”. So the active class on the current route doesn’t seem to work at all because of the component. This is the view on /latest but with another name for the Latest-link:

Just installed 2.9.0.beta5 and now the 3 menu items I created with this plugin are not visible anymore. They’re still clickable, but not rendered in full. The 3 menu items are at the top of this forum.

Also reported here:


Quick question-
Trying to create this and make the url ?order=created so users can browse recent topics.

This works perfectly fine on desktop but fails on mobile- the navigation-bar just reloads and won’t show the dropdown menu.

I have same question…Is that a solution? :face_with_monocle:

I think i know why this happened…
the component has line below:

if (window.location.pathname.match(sec2)) {
          $(navHeader).html(filter + markd);

Because of the reg…?itself is used as special reg mark,and the param is supposed to compare with
I fork the component , change it to the following code and it works.

if (sec[2].indexOf("?") === -1) {
        if (window.location.pathname.match(sec[2])) {
          $(navHeader).html(filter + markd);
      } else {
        // reg ?->/?
        sec[2] = sec[2].replace(/\?/g, "/?");
        const pathWithSearch = window.location.pathname +;
        if (pathWithSearch.match(sec[2])) {
          $(navHeader).html(filter + markd);

Oh wow, well done :clap:

Where did you put this piece of code?

Discourse-nav-links-component/mobile/head_tag.html ,replace the match code. :face_with_peeking_eye:

1 Like

Why not make that a PR so that everyone can benefit?


Can I do that? I always think my code level is too poor…and feel a little embarrassed to do that.Thanks for the advice!!! I’ll revise it and make a PR!

1 Like

I think that about my contribution attempts too!!

However the @team (and their automated tools) seem to be pretty good at tidying code up.

Once you’ve made it a PR, you can post the PR link here in Meta and it displays an awesome embedded live update of the PR status.