Return a widget:
What you could do is return your own custom widget to api.decorateWidget, which will give you a lot more control in terms of applying attributes, state, actions, etc.
So you could do:
api.decorateWidget('menu-links:before', helper => {
return helper.widget.attach("custom-menu-links");
});
Then inside javascripts/discourse/widgets/custom-menu-links.js, create a widget using the createWidget helper:
import { createWidget } from 'discourse/widgets/widget';
createWidget('custom-menu-links', {
...
});
Take a look at this topic to learn some of the features of Widgets:
I used widgets quite a bit in my dropdown header theme component, you might find some of the code helpful.
Adding target=“_blank”
You add it to the attributes object:
return helper.h('a.google',
{
attributes: {
href: "https://google.com",
target: "_blank",
title: "Google"
},
}
...
);