Aplication menu bar with bittons and dropdowns (question or feature request)

[snorky22]

I am trying to recreate the application menu that you can see at https://latex2web.app . It is a navbar built with Bootstrap.
What is important to understand is that there are a lot of functionalities in this app when you are a registered user. What I mean is that it would not be practical to use a vertical navigation layout.

So I use a wa-split component and use a button group for the left and right parts. Most of the elements in the menu/nav bar are links. So, with simple buttons, it's OK. I also have dropdown menus. So, logically, I would use dropdown items to populate the dropdown menu. Unfortunately, the href attribute does not seem to work in dropdown items as it does in buttons. Am I wrong?

For the moment, I replace the dropdown items with a vertical button group, but it is rather cumbersome.

Would it be possible to attribute links to dropdown items (if this is not already the case)? Or is using menu elements of Shoelace a viable alternative? I am completely new to this.

[claviska]

Sorry, the wa-split reference threw me off. Is this a Shoelace or a Web Awesome question?

[snorky22]

It's a Web Awesome question, I am a backer.

[claviska]

We don't have a proper nav bar component yet, but here's how I'd implement it. Dropdown menu items don't support links, but you can use the wa-select event and navigate to some/all options in a handler as shown here.

https://codepen.io/claviska/pen/yyYYmay

We can't really make dropdown items become links due to their structure, but we'll consider ways to reduce friction here.

[snorky22]

I prefer having the hard links. My app uses a backend MVC framework, and each HTTP request is handled by the app. Here is a CodePen for the navbar (it is a WIP). The links do not work since they are outside of CodePen.
https://codepen.io/snorky22/pen/azvdmay

This would be all good if I could get rid of the gaps in the button groups.