Custom Header Links

Discourse · 2018 年 6 月 24 日午前 10:22


	Summary	Custom Header Links allows you to easily add custom text-based links to the header.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-custom-header-links
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Features

Desktop

Mobile

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

Settings

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.

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 document
Perform check on document:

rolando · 2020 年 10 月 11 日午後 5:55

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

rolando · 2020 年 10 月 11 日午後 5:57

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

bekircem · 2020 年 11 月 9 日午後 6:05

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="https://marketplace.zoom.us/docs" target="_blank">Developer</a>
  <span class="caret"></span>
  <div class="dropdown-content">
    <a title="Zoom API Docs" href="https://marketplace.zoom.us/docs/api-reference/introduction" target="_blank">API</a>
    <a title="Zoom SDK Docs" href="https://marketplace.zoom.us/docs/sdk/native-sdks/introduction" target="_blank">SDK</a>
    <a title="Zoom Developer Blog" href="https://medium.com/zoom-developer-blog" target="_blank">Blog</a>
    <a title="Zoom Developer Changelog" href="https://marketplace.zoom.us/docs/changelog" target="_blank">Changelog</a>
    <a title="Zoom Developer Survey" href="https://docs.google.com/forms/d/e/1FAIpQLSeJPLhNuxjtkxyyV276R8S_nYz99fpMbbS8VWkC8Hwi7-2Byg/viewform" target="_blank">Survey</a>
  </div>
</div>

shréa · 2020 年 11 月 24 日午後 10:34

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.

sok777 · 2021 年 1 月 21 日午前 10:36

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

jrgong · 2021 年 1 月 30 日午後 8:34

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

Zup · 2021 年 3 月 28 日午前 2:07

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

satonotdead · 2021 年 5 月 23 日午後 6:08

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

AntiMetaman · 2021 年 10 月 15 日午後 1:14

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:

tjot · 2021 年 10 月 28 日午後 8:35

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.

Nick_Chomey · 2021 年 11 月 16 日午後 4:56

ありがとうございます！さまざまなバナーやコンポーネントを試した後、これを見つけました。まさに私が求めていたものです！

1つリクエスト/提案があります。リンクの並べ替え機能です。いくつか作成した後、先頭に1つ追加したいことに気づきました。今度はすべて手動でコピー＆ペーストする必要がありますが、コピーすると他のエントリも同期/更新され続けるため、実際には非常に面倒です。

ドラッグ＆ドロップまたは上下ボタンがあれば、将来のユーザー（または将来の編集）にとって非常に役立ちます。

dax · 2021 年 11 月 16 日午後 7:04

flex プロパティを使用しているため、数行の CSS で簡単に順序を操作できます。

例：

デフォルトの順序
カスタム順序

CSS の例：

.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;
  }
}

keegan · 2021 年 11 月 16 日午後 7:15

@Nick_Chomey このテーマコンポーネントだけでなく、type: list設定を使用する他の多くのテーマコンポーネントでも、これを行う必要があると感じることがよくありました。以前は機能リクエストを提出するつもりでしたが、完全に忘れていました。しかし、あなたが思い出させてくれたので、ここに1つ追加しました。

Nick_Chomey · 2021 年 11 月 16 日午後 7:36

@dax ありがとうございます！これが可能だとは知りませんでした！

@keegan 素晴らしいですね。いつか追加されることを願っています！

hrayner · 2021 年 11 月 30 日午前 2:12

私も同じ解決策を探しています。彼らがこれをどのように行ったか、もうわかりましたか？
ありがとうございます！

andreas_can · 2022 年 1 月 29 日午後 11:14

Hi @Johani
素晴らしいコンポーネントを作成していただきありがとうございます！

ユーザーがログインしている場合にのみリンクを表示することは可能でしょうか？
外部リンクになります。

Johani · 2022 年 1 月 30 日午前 9:29

Hey @andreas_can Metaへようこそ

このコンポーネントは、各リンクのテキストに基づいてCSSクラスを追加します。追加されるクラスは、リンクに指定したテキストと同じですが、スペースはハイフン（-）に置き換えられ、テキストは小文字に設定されます。その後、文字列 -custom-header-links が末尾に追加されます。

たとえば、テキストが

privacy

のリンクを追加すると、リンク要素には

privacy-custom-header-links

というクラスが追加されます。

リンクテキストが

Visit Shop

の場合は、CSSクラスは

visit-shop-custom-header-links

になります。

これで、各リンクに追加されるクラスがわかりました。ご質問に戻ります。

Discourseは、ユーザーがログインしていない場合に<html>タグにCSSクラスを追加します。そのクラスは

anon

です。

そのため、ログインしていないユーザーに対して特定のリンクを非表示にするために、それを使用できます。たとえば、テキストが

Customer Support

のリンクがあり、ログインしていないユーザーに表示したくないとします。

その場合、このCSSを

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

メインテーマの common > CSS タブに追加します。

これにより、ログインしていないユーザーに対して、その特定のリンクが非表示になります。

andreas_can · 2022 年 1 月 30 日午前 10:19

迅速かつ丁寧なご返信ありがとうございます！
まさに探していたものです。

試してみます

Alon1 · 2022 年 4 月 5 日午後 10:04

CSSのdisplay: none;は、ブラウザのレンダリングからリンクを隠すだけで、ページのソースコードやウェブクローラー、検索エンジンからは常に完全に表示されることに注意してください。

トピック		返信	表示
⬇️ Dropdown Header Theme component pavilion	67	7177	2025 年 10 月 9 日
Custom Top Navigation Links Theme component official , top-navigation-links	34	18092	2025 年 12 月 14 日
Custom Header Links (icons) Theme component official , custom-header-icons	119	31131	2025 年 8 月 4 日
Cannot get the Custom Header Links to display? Support custom-header-links	15	765	2023 年 9 月 3 日
Add button in header for logged in users Dev	5	764	2023 年 9 月 25 日

Custom Header Links

Features

Settings

関連トピック