Custom Header Links

Could be possible to add a flag to show or hide links as specific groups of users?


Great component thanks! I am new and this is the first component I installed myself. Due to its simplicity even I got it to work and I am well proud of myself.
One more question I couldnt find the answer for despite a lot of searching on the Forum:

Is there a way to make the text in the header bold and/or change the font used for the header?


Hi, we are using “vdo” in our three links, and yet they show up in the mobile version (where they break the UI due to forcing a too wide width).

Is “vdo” working properly for anyone reading this?

We are running 2.8.0.beta6 ( eed3773b97 ).

1 Like

I have just tested this on the latest Discourse code, using the link examples that are supplied when the theme component is first installed:

  • External link, this link will open in a new tab,, vdo, blank, remove
  • Most Liked, Posts with the most amount of likes, /latest/?order=op_likes, vdo, self, keep
  • Privacy, Our Privacy Policy, /privacy, vdm, self, keep

When I force my site to enter mobile mode by loading it with the ?mobile_view=1 query parameter, the first two links (set to vdo) are correctly removed from the header and only the final vdm link is displayed.


Thank you for testing. When using this parameter on a desktop browser I obtain correct results, both with our custom links and with the defaults.

However, have you tested on an actual mobile device? With Firefox on an Android mobile phone I can see the default and the custom links (desktop mode being disabled). The rest of the Discourse UI is the usual mobile UI.

(If I type the ?mobile_view=1 parameter manually in the mobile browser URL then the links follow vdo.)

EDIT: I have tested with Chrome mobile as well, and there it works correctly. I’m confused, but a bit relieved. :slight_smile:


Is there a way this theme component can allow for dropdown navigation? That means, when I hover over a header link, it has sub-items that appear underneath it. I know that this can be done via html/css as shown here:


Thank you for creating this component!
One question and potentially a feature request: can we show a specific link for a specific group?
For example, if a user is in group customers I’d like to show a link to the customer’s control panel, if a user is in group workers I’d like to add a link to a different panel.
I think this would be a very useful feature.
The group name could be the last (optional) parameter.


Thanks for this! I just found it after trying various other banners and components. Its exactly what I need!

One request/suggestion: ability to re-order the links. I just made a bunch and realized I’d like to add one at the top. Now I’ll have to manually copy and paste them all, which is actually quite cumbersome as they keep syncing/updating other entries as I copy them down.

Drag and drop or up/down buttons would be very useful for future users (or future edits).


You can already manipulate the order very easily with some lines of CSS since we use the flex property.


CSS example:

.custom-header-links li {
  &:nth-child(1) {
    order: 3;
    background: red;

  &:nth-child(2) {
    order: 1;
    background: green;

  &:nth-child(3) {
    order: 2;
    background: yellow;

@Nick_Chomey I’ve often found myself needing to do this, not only for this theme component but many other theme components that use the type: list setting. I was planning on submitting a feature request before, but I completely forgot, but since you’ve reminded me, I’ve added one here:


@Dax Thanks! I had no idea this was possible!

@keegan looks great, hopefully itll get added at some point!


I’m looking for the same solution, did you find out how they did this yet?

1 Like

Hi @Johani
Thanks for creating such an awesome component!

Is it possible to have a link only be visible if the user is logged in?
It will be an external link.

1 Like

Hey @andreas_can welcome to Meta :wave:

This component adds a CSS class to each link based on its text. The class added is the same as the text you give the link except that spaces are replaced with a hyphen (-) and the text is set to lowercase. Then the string -custom-header-links is appended at the end.

So if you add a link with the text


then the link element will have the class


If your link text is

Visit Shop

then the CSS class would be


So, now you know the class added to each link. Going back to your question.

Discourse adds a CSS class to the <HTML> tag when the user is not logged in. That class is


So, you can use that to hide certain links for users who are not logged in. Let’s say I have a link with the text

Customer Support

and I don’t want it to show to users who are not logged in.

I would then add this CSS

.anon {
  .customer-support-custom-header-links {
    display: none;

in the common > CSS tab of my main theme.

This will hide that particular link for users who are not logged in.


Thank you for such a quick and thorough reply!
This is exactly what I was looking for.

I’ll give it a go :slightly_smiling_face:


Note that CSS display: none; only hides the link from browser rendering but it is always fully visible to anyone looking at the page source, to web crawlers and search engines.


This is generally true, CSS isn’t a secure way to hide anything because a savvy person might look at the page source for whatever reason… but we do serve a no-js view to crawlers, so in that case content added by themes usually isn’t indexed anyway.


The preview does not work


I’ve updated the preview link, it should work now!


Is it possible to use this component to call a javascript with
instead of an actual url?

(It seems to almost work, but I’m hitting CSP violations.)

Edited to add:
I got it to work. If anyone else should ever wonder, I used # in the component’s UI in place of a url, then used an event listener to call the javascript function.

Others likely know a better way, and I hope they’ll share that knowledge if they do!