There are a variety of settings you can configure to customize the component, including link customizations, icon sourcing, adding link security, positioning, etc.
A list of all the settings and detailed explanations about them can be found here.
When to Use
This component is useful if you want links and dropdown links inline with Discourse’s existing header. Its recommended to only use this if you have a few links (3/4) so there is sufficient space.
If you need more than a few dropdown links, check out Header submenus by @Johani which creates a header menu row above Discourse’s original header.
Although this component also supports adding links alone without the dropdowns, if you only need links without the dropdowns, feel free to use Custom Header Links also by @Johani:
Preview
Desktop:
Mobile:
Due to lack of space on mobile, links can be triggered by tapping on the arrow down button.
Not sure why but this doesn’t seem to work for me, as soon as it’s enabled my header vanishes, on a clean theme with no other components, tried multiple base themes also
1 thing to note is that since these don’t use a tags you can’t middle click the links like you can on the header links plugin, is there a reason you aren’t using a tags?
Hmm… that’s an interesting point. The reason I didn’t use anchor tags is because each link is a widget that may generate a dropdown if dropdown items are present. With using the widget I am also taking advantage of the click() method that calls: DiscourseURL.routeTo(this.attrs.url);.
This has some benefits such as maintaining the history of where you are in a topic. For example if you click on a link to a topic with an anchor tag it always starts you off at the top of the topic. However, if you’ve visited the topic before and you were last reading halfway through the topic, the routeTo approach will bring you to that same position on the topic.
I wonder if there’s a way to add middle click functionality to widget clicks… will have to look into that, perhaps someone on the Discourse team might have an idea.
Hi Keegan, thanks for creating this theme component! It is the perfect bridge between the Custom Header Links and Header Submenu components I had looked at before.
Any chance to add a ‘target’ option (open in new tab) to the links we add there, like in the other two theme components?
I am manually populating the submenu items from an external source and I send couple of ajax requests inside a loop to retrieve them. Naturally, if there are many items. The component loads before all the requests are finished and some items are missing. Is it possible to modify the source to achieve this?
target links to open in new tabs as previously mentioned?
We are just setting up a new instance on the Discourse servers and are trying to get our Discourse menu to match our WP site as closely as a practicable.
Hi, thanks for this great component!
However, I have noticed that when I click on a link, all the texts and icons are replaced with those of the last element.
I also noticed that if I click on the logo, the texts and icons of the links change
I would gladly have a look, but you changed the layout and apparently don’t use the component anymore to show links.
I can’t repro the issue on my test forum.
If, by chance, you can have another look and tell us if you still have the issue, feel free to do it.
If such a feature was implemented, do you think it should override users’ preferences regarding external link (Open all external links in a new tab setting)?
I decided to switch layouts to create a uniform graphic across all areas of my platform.
After I do a domain migration, I’ll check if the error is resolved.
Sooo… I have just implemented this theme-component and already we have gotten some pretty valid feedback from some of our long-time members.
So basically, if I were to:
(1) click on the search button on the header first, and then
(2) hover on the dropdown header second.
→ The dropdown header would pop-up underneath the search box which is not what we are looking for. Ideally, the search bar should disappear before the dropdown menu pops up.
Whereas if I were to hover on the dropdown header first, and then click on the search button, it behaves just as I expected i.e. (1) dropdown menu disappears and (2) search bar appears.
Another member also complained about how it looks on mobile, is there a way to only enable this theme-component on desktop?
Overview
Code
Settings
When to Use
Preview
.
