⬇️ Dropdown Header

Theme component
1

:mag: Overview

This theme component allows you to add links with text, icons, and dropdowns to the native header of your Discourse site.

image
image1440×1024 123 KB

Bug reports, feature requests, and PRs are most welcome; sponsorship enables work on this component to be prioritised by the Pavilion team.

: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 icons, links, and dropdown links inline with Discourse’s existing header. It is a great way to have lots of accessible links without unnecessary clutter or the sidebar getting out of control.

If you need lots of dropdown links, check out Header submenus, 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.

:clapper: Preview

Desktop:

Desktop

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

Mobile
Mobile640×1292 48.5 KB

Install Theme Component

45 Likes
2

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
3

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
4

Works great now, Thanks!

5

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?

2 Likes
6

@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
7

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
8

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?

1 Like
9

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?

1 Like
11

Amazing component. Thank you for sharing :heart:.

12

Hello! Thanks for this fantastic component :slight_smile:

There seems to be a margin missing on the right when not connected on the forum. Here’s how it looks like :
Capture d’écran 2022-12-05 à 16.22.20

Whereas if I’m connected it’s fine.

Hope it helps improving it.

13

Any chance there could be:

  1. links to eternal URLs?
  2. 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.

Thank you

1 Like
14

I just installed this component to replace the “Custom Header Links” and also “Easy Footer components”.

And I really love this component, it is great!

Works for me. Do you mean a _blank target or something like this or external urls in general (which work for me)?

I noticed one thing: On mobile devices I cannot scroll down. It seems that I have too many menus. :wink: Can this be adjusted?

2 Likes
15

I just made a PR for that problem:

When you check the link above you can see that the adjusted CSS works as it should. :slight_smile:

3 Likes
16

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 attach a short video example:

The page link is: Forum › Portale CMS - ITTS E. Scalfaro

How can I fix? Many thanks in advance!

17

Great theme-component! :chefs_kiss:

It would get even better if we were also able to set it so that the links would open in a new tab, instead of in the same tab as it is now. :+1:

18

Hi Francesco :wave:

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. :slight_smile:

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)?

image

2 Likes
22

Hi, thank you very much for your reply.

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.

Have a nice day :smiley:

2 Likes
23

I think it should follow the users’ preferences. Unless if it was overridden by an admin or moderator :+1:

24

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?

Thanks :+1:

1 Like