⬇️ Dropdown Header

:mag: Overview

This theme component allows you to add links and dropdowns in the header of your Discourse site.

:computer: Code

View the GitHub Repo

:gear: Settings

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.

:thinking: 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:

:clapper: Preview

Desktop:

Desktop

Mobile:
Due to lack of space on mobile, links can be triggered by tapping on the arrow down button.


Install Theme Component

22 Likes

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

<div id="ember7" class="d-header-wrap ember-view"><div></div></div>

2.9.0.beta4

(c99a6b10fb)

1 Like

Hey @Fma965, my apologies, I have pushed out some fixes for some small bugs, it should hopefully be working now for you. Let me know how it goes.

3 Likes

Works great now, Thanks!

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?

1 Like

@Fma965

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.

1 Like

Yes I figured it would be relating to this, was just something one of my moderators mentioned to me, figured I’d raise the point here just incase :slight_smile:

1 Like