Custom Header Links

(Joe) #1

This is a theme component that will allow you to add custom text-based links to the header easily.

Github repository link:





(due to very limited space I don’t recommend adding more than one link on mobiles)


Adding links is straightforward. Every link needs 6 items. You enter comma delimited values in this order:

link text, link title, URL, view, target, hide on scroll

Link text: the text for the link.
Link title: the text that shows when the link is hovered.
URL: The path for the link (can be relative).
View: vdm = desktop and mobile, vdo = desktop only, vmo = mobile only.
Target: blank = opens in a new tab, self = opens in the same tab.
Hide on scroll: remove = hides the link when the title is expanded on topic pages keep = keeps the link visible even when the title is visible on topic pages.

If you’re not sure what hide on scroll does, here’s an example:

Most Liked and Privacy are set to keep and so they remain visible. The other links are set to remove, and so are hidden when the title expands in the header. This only affects topic pages.

How do I install this component?

Follow the theme installation guide and add the theme component to your active themes.

If you’re new to Discourse themes, you can learn more about them here.

How to add header menu links
How can i add custom hamburger menu
How to structure a multilingual community
How to split the forum into two main parts (general/groups) and how to display only subcategories I can create a new post in?
Display StatusPage status on as a header link
Header submenus
Link behavior inconsistent
Best place(s) to link back to a non-forum homepage?
Best way to customize the header
Mobile formatting just broke
How to finely scroll out custom header?
Control CSS based on user's logged in state
(Brahn) #2

Nice theme, thanks!

It seems to only work if the user is logged in. Anyway to fix that for anonymous as well?

Any chance of emoji or unicode support in the text?
e.g. ☎ 1234 5678,Contact Support,tel:1234 5678,vdo,blank,remove
Would appear as - :phone: 1234 5678

1 Like
Category for Threads with zero replies?
(Joe) #3

I am not sure why it’s not working on your end but it should work for both anon and logged in users without any issues.

Try and check on theme creator in an incognito tab:
Discourse Theme Creator

I believe you should be able to add html entities by copy/pasting them directly into the theme settings as opposed to using the entity number. So instead of this:

☎ 1234 5678,Contact Support,tel:1234 5678,vdo,blank,remove

Try something like this:

☎ 1234 5678,Contact Support,tel:1234 5678,vdo,blank,remove

(Brahn) #4

That works, thanks.

There seems to be an odd refresh or delay issue when adding a component to a theme. Or a user issue. It is working now for both my site themes both anon and logged in after removing and re-adding.


I imported the theme and “Created” those link lines and saved… but I’m still not seeing any links up top. Did I miss something?

Thanks in advance for any help. :slight_smile:

(Joe) #6

It sounds like everything is set up but you didn’t add the theme component to your active theme. Have a look at how to add theme components to a theme and let me know if the issue persists.

(Ronny) #7

I’ve installed this component Custom Header Links.
how to configure the menu links?


You need to look in your settings page not the CSS Customisation page

1 Like
(Ronny) #9

where is the page settings?
let me know what’s the menu


Apologies I thought it was added into the settings but just imported this theme component and can see it should be at the bottom of the components page

What version of discourse are you using? As it looks as though you will need to upgrade as you do not have the split of Themes and Components on the left hand side.

(Orlando Del Aguila) #11

Is there a way to set the links programmatically?

(Joe) #12

Like @mikechristopher mentioned, you’re on an old version of Discourse that does not support theme settings. All Discourse branches now have support for theme settings so you need to update your install.

Yes, that should be possible, what did you have in mind?

(Orlando Del Aguila) #13

Our Discourse instance deployment is automated using Terraform, we set SiteSettings depending on the env we are deploying, and I would like to automate this part too.

What I ended up doing is copying your code to a plugin and use SiteSettings to pull the values, but if I can automate the install of the theme as well as setting these values, I’ll do that instead of the plugin approach.


1 Like
(Seth) #14

What do you think about adding 2 additional setting options.
type: text | button Allow for a text link as it is now, but also duplicate the button element wrapper to simulate a button like the login button when a user is not logged in

classes: string - This could help with the programatic aspect of allowing a link to be accessed by a component to react to a programatic parameter.

We’re using SSO for logging in and if the user is logged in we are showing a link to go back to their account. Also we’ve added a sign up link too instead of pushing them into the SSO login flow directly.

1 Like
(Mittineague) #15

Do you think there is a need for an actual button element? I associate buttons with forms, and navigation links aren’t in a form, they’re links.

Is there any reason you are unable to style the link so that it looks like a button?

1 Like
(Orlando Del Aguila) #16

Hey @Johani,

I just checked the theme in the latest version and the hide is not working correctly. I’m not sure what changed on the Ember side but now this line discourse-custom-header-links/header.html at master · hnb-ku/discourse-custom-header-links · GitHub executes after scrolling but before the title appears

I wrapped the thing in a setTimeout (because JavaScript) as a quick fix, but if you find a proper fix let us know.


(Joe) #17

Thanks for reporting the issue @eatcodetravel :+1:

It should be fixed once you updated the component.

I also updated the theme-creator demo so you can see it live here Discourse Theme Creator

(Steven Greco) #18

is there a way to use font awesome icons for the link text?


@Johani is is possible to have different sets of visibility for the custom header links? For example:

  • custom header links visible only to anonymous users
  • custom header links visible only to logged in users
  • custom header links visible to everyone

Use case:

  • add “Go anonymous” link … which should be visible only for the logged in users.

Btw. is it even possible to add “Go anonymous” action to custom header links? According to Help! with the Anonymous feature on discourse it is a java action.

Thank you for your help!

1 Like
(El Foro Viajero) #20

Hi there, is it possible to ad icons to the menus? and sub-menus? thanks!