You might want to have a look at this theme component: Header submenus. It allows you to build a header menu with submenus. You could either just use that component, or have a look at it as example code of how to create your own component.
There the headers and submenus are added before the discourse header. Actually we are expecting the headers with submenus should added to discourse headers which I marked below,
I have solved this issue using some custom html insertion through discourse plugin api events.
So, Initially I have installed “Custom Header Links” component and configure the headers as usual. Then I have used discourse api events to insert the custom html on header once the header DOM elements is loaded like below,
api.onPageChange(url => {
if($(".header-buttons").length != 0 && i == 0) {
$('.custom-header-links .services-custom-header-links a').append("inserting icons");
$(".header-buttons").prepend("adding ul tag elements");
$(".resource-dropdown-menu").after("appending next ul element using first inserted ul element class name");
i++;
}
});
Here you can able to add the submenus into headers DOM. But it makes alignment issue. We should carry over the alignment through CSS. Also, we have to write click function to open submenu and changing the background color header like that. Thanks