Custom Header Links

:discourse2: Summary Custom Header Links allows you to easily add custom text-based links to the header.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component




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


Name Description
custom header links Custom links to be displayed in the header
links position Note that when links are displayed on the left, they’re automatically hidden while scrolling within topics to make room for the title

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.

Links position: This setting allows you to change the default layout so links will appear on the left near the logo instead of on the right. Note that when positioned to the left, links will automatically be hidden when scrolling within topics to make room for the topic title.

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T20:31:00Z

Check documentPerform check on document:

don’t know if this has been suggested, tried reading back but couldn’t find it.

was thinking that maybe adding the ability to create “sub-links” thus creating the idea of a list that you could edit (text color, background hover etc.) to get results similar to what zoom has


the links that have the arrow to the right like developer means that it has “sub-links”

1 Like

Is it possible to add some basic dropdown menu to an any item?

I couldn’t create a dropdown menu with “Custom header links”. It seems Zoom did that. I reviewed their dropdown menu via console, but I couldn’t figure out how they interfere with the html of this component for adding dropdown to any item.

Is there a way to add this dropdown to item? @Johani

<div id="dropdown">
  <a title="Zoom Developer Documentation" href="" target="_blank">Developer</a>
  <span class="caret"></span>
  <div class="dropdown-content">
    <a title="Zoom API Docs" href="" target="_blank">API</a>
    <a title="Zoom SDK Docs" href="" target="_blank">SDK</a>
    <a title="Zoom Developer Blog" href="" target="_blank">Blog</a>
    <a title="Zoom Developer Changelog" href="" target="_blank">Changelog</a>
    <a title="Zoom Developer Survey" href="" target="_blank">Survey</a>

Has anyone run into any issues with links not opening when setting links position to “left”?

Links work on Preview but not when I apply it to a theme.
Right alined links work fine though.

1 Like

Hi! Thanks for creating this.
Is it possible to add an SVG before the text link? If so - how?

1 Like

Have you found a solution for this? I am look for the same solution.


how can the title convert **formatting code** into actual formatting? also how about Font Awesome icons before the text?

1 Like

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


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.