Allow MenuItem's to contain an Anchor element, to allow download

[nbabb]

Describe your motivation

We would like to use the MenuBar component, however one of the use-cases we need to support is an Anchor tag (for download). When you add an Anchor to a MenuItem, the default behavior adds a bunch of padding around the Anchor, such that the user can select the menu item, but not trigger the Anchor.

Describe the solution you'd like

There should be some variant for MenuItem that avoids all the padding, and allows the addition of an Anchor tag (or possibly other components) such that the Anchor is triggered by selection anywhere within the MenuItem.

Describe alternatives you've considered

Working with Javier in support, he was able to provide a workaround, but it appears to be quite fragile.

        val link = Anchor("http://www.google.com", Span("Link"))
        link.element.style.set("height", "100%")
        link.element.style.set("padding-left", "24px")
        link.element.style.set("display", "grid")
        link.element.style.set("place-items", "center")
        link.element.style.set("text-decoration", "inherit")
        link.element.style.set("color", "inherit")
        link.element.style.set("cursor", "default");
        link.element.style.set("text-decoration", "inherit")
        link.element.style.set(
            "padding-right",
            "calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4)"
        )
        val mitem: MenuItem = export.subMenu.addItem(link)
        mitem.element.style["--_lumo-item-selected-icon-display"] = "none"
        mitem.element.style["padding"] = "0"
        mitem.element.style["align-items"] = "stretch"

Additional context

No response

[web-padawan]

Thanks for the issue. We can consider having default styles for slotted links to make them look better.

[cdir]

I have a MenuBar as an application menu, where one of the menu items should navigate to an external link (another part of my application in a separate deployment). At the moment I use Page#setLocation and thus have a server-side navigation. I would prefer a native anchor, because the user can also decide to open the link in a new tab.

[Legioth]

Alternatively, there could be a dedicated API for download items, similarly to what is suggested for Button in https://github.com/vaadin/flow-components/issues/7203.

[rolfsmeds]

This is also relevant for opening new browser tabs/windows.