# ⬇️ Dropdown Header
**URL:** https://meta.discourse.org/t/dropdown-header/226170
**Category:** Theme component
**Tags:** pavilion
**Created:** [May 4, 2022, 11:49pm UTC](https://meta.discourse.org/t/dropdown-header/226170 "2022-05-04T23:49:48Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [May 4, 2022, 11:49pm UTC](https://meta.discourse.org/t/dropdown-header/226170/1 "2022-05-04T23:49:48Z")
## 🔍 Overview
This theme component allows you to add links with text, icons, and dropdowns to the native header of your Discourse site.
Bug reports, feature requests, and PRs are most welcome; sponsorship enables work on this component to be prioritised by the Pavilion team.
## 💻 Code
[View the GitHub Repo](https://github.com/paviliondev/discourse-dropdown-header)
## ⚙ 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](https://github.com/paviliondev/discourse-dropdown-header#%EF%B8%8F-settings).
## 🤔 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](https://meta.discourse.org/t/header-submenus/94584), 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](https://meta.discourse.org/t/custom-header-links/90588).
## 🎬 Preview
**Desktop:**
**Mobile** :
Due to lack of space on mobile, links can be triggered by tapping on the arrow down button.
* * *
Install Theme Component
---
### Author:  [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [May 7, 2022, 8:56pm UTC](https://meta.discourse.org/t/dropdown-header/226170/2 "2022-05-07T20:56:09Z")
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
```plaintext
```
### 2.9.0.beta4
([c99a6b10fb](https://github.com/discourse/discourse/commits/c99a6b10fbac84e9acd0825e7e41aa2f5d8646c4))
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [May 7, 2022, 11:50pm UTC](https://meta.discourse.org/t/dropdown-header/226170/3 "2022-05-07T23:50:02Z")
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.
---
### Author:  [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [May 8, 2022, 11:37am UTC](https://meta.discourse.org/t/dropdown-header/226170/4 "2022-05-08T11:37:54Z")
Works great now, Thanks!
---
### Author:  [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [May 8, 2022, 1:53pm UTC](https://meta.discourse.org/t/dropdown-header/226170/5 "2022-05-08T13:53:22Z")
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?
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [May 12, 2022, 10:28pm UTC](https://meta.discourse.org/t/dropdown-header/226170/6 "2022-05-12T22:28:14Z")
@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.
---
### Author:  [@Fma965](https://meta.discourse.org/u/Fma965)
#### Post date: [May 12, 2022, 11:29pm UTC](https://meta.discourse.org/t/dropdown-header/226170/7 "2022-05-12T23:29:21Z")
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 🙂
---
### Author:  [@emma\_bitfount](https://meta.discourse.org/u/emma_bitfount)
#### Post date: [September 6, 2022, 3:30pm UTC](https://meta.discourse.org/t/dropdown-header/226170/8 "2022-09-06T15:30:48Z")
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?
---
### Author:  [@attj](https://meta.discourse.org/u/attj)
#### Post date: [September 8, 2022, 3:21pm UTC](https://meta.discourse.org/t/dropdown-header/226170/9 "2022-09-08T15:21:27Z")
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?
---
### Author:  [@robotnjik](https://meta.discourse.org/u/robotnjik)
#### Post date: [October 27, 2022, 6:51am UTC](https://meta.discourse.org/t/dropdown-header/226170/11 "2022-10-27T06:51:22Z")
Amazing component. Thank you for sharing ❤.
---
### Author:  [@ImaCrea](https://meta.discourse.org/u/ImaCrea)
#### Post date: [December 5, 2022, 3:25pm UTC](https://meta.discourse.org/t/dropdown-header/226170/12 "2022-12-05T15:25:42Z")
Hello! Thanks for this fantastic component 🙂
There seems to be a margin missing on the right when not connected on the forum. Here’s how it looks like :
Whereas if I’m connected it’s fine.
Hope it helps improving it.
---
### Author:  [@kiefferr](https://meta.discourse.org/u/kiefferr)
#### Post date: [January 14, 2023, 8:53pm UTC](https://meta.discourse.org/t/dropdown-header/226170/13 "2023-01-14T20:53:20Z")
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
---
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [January 15, 2023, 2:10pm UTC](https://meta.discourse.org/t/dropdown-header/226170/14 "2023-01-15T14:10:38Z")
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!
> [@kiefferr](#):
>
> links to eternal URLs?
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. 😉](https://forum.gdngs.de) Can this be adjusted?
---
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [February 21, 2023, 5:31pm UTC](https://meta.discourse.org/t/dropdown-header/226170/15 "2023-02-21T17:31:48Z")
> [@Roi](#):
>
> I noticed one thing: On mobile devices I cannot scroll down. [It seems that I have too many menus. 😉](https://forum.gdngs.de) Can this be adjusted?
I just made a PR for that problem:
[https://github.com/paviliondev/discourse-dropdown-header/pull/6](https://github.com/paviliondev/discourse-dropdown-header/pull/6)
When you check the link above you can see that the adjusted CSS works as it should. 🙂
---
### Author:  [@FrancescoM](https://meta.discourse.org/u/FrancescoM)
#### Post date: [May 22, 2023, 2:18pm UTC](https://meta.discourse.org/t/dropdown-header/226170/16 "2023-05-22T14:18:22Z")
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: [https://oii.francescomancuso.it/forum/](https://oii.francescomancuso.it/forum/)
How can I fix? Many thanks in advance!
---
### Author:  [@albert\_vu](https://meta.discourse.org/u/albert_vu)
#### Post date: [June 14, 2023, 4:16pm UTC](https://meta.discourse.org/t/dropdown-header/226170/17 "2023-06-14T16:16:45Z")
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. 👍
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [June 14, 2023, 5:04pm UTC](https://meta.discourse.org/t/dropdown-header/226170/18 "2023-06-14T17:04:48Z")
> [@FrancescoM](#):
>
> How can I fix? Many thanks in advance!
Hi Francesco 👋
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. 🙂
> [@albert\_vu](#):
>
> 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. 👍
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)?
---
### Author:  [@FrancescoM](https://meta.discourse.org/u/FrancescoM)
#### Post date: [June 15, 2023, 10:31am UTC](https://meta.discourse.org/t/dropdown-header/226170/22 "2023-06-15T10:31:21Z")
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 😃
---
### Author:  [@albert\_vu](https://meta.discourse.org/u/albert_vu)
#### Post date: [June 16, 2023, 3:47pm UTC](https://meta.discourse.org/t/dropdown-header/226170/23 "2023-06-16T15:47:56Z")
I think it should follow the users’ preferences. Unless if it was overridden by an admin or moderator 👍
---
### Author:  [@albert\_vu](https://meta.discourse.org/u/albert_vu)
#### Post date: [June 16, 2023, 3:55pm UTC](https://meta.discourse.org/t/dropdown-header/226170/24 "2023-06-16T15:55:26Z")
Sooo… I have just implemented this theme-component and already we have gotten some pretty valid feedback from some of our long-time members.
> **[New Header Dropdown menu](https://forum.katalon.com/t/new-header-dropdown-menu/90813/2?u=albert.vu)**
>
> Not a glitch or weird but certainly a design error… There is no other menu that appears as a mouseover popup (all the others need to be clicked). That’s inconsistent UX. If you do keep it as a popup, it should appear above everything. At the...
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 👍
[Next page](https://meta.discourse.org/t/dropdown-header/226170.md?page=2)