Enhance menu bar documentation on icons and variants

[rodolforfq]

Added guidance on using MenuBarVariant for drop-down indicators and icon-only menu items. Based con customer's feedback.

[CLAassistant]

All committers have signed the CLA.

[github-actions]

AI Language Review

The only notable change is the addition of text mentioning the use of MenuBarVariant.LUMO_DROPDOWN_INDICATORS and MenuBarVariant.LUMO_ICON for styling menu items. There are no issues requiring improvement in the updated version.

[jouni]

I’m not sure I follow the logic implied by the additional sentences. In what cases should drop-down indicators be used? And I don't think the LUMO_ICON variant hides the drop-down indicators.

Also, as the guidance here is Lumo-specific and doesn't apply to base styles or Aura at all, I would like to avoid theme-specific guidance in the main component docs page. Theme-specific things would be more suitable on the Styling sub-page.

Based con customer's feedback.

What was the feedback?

[StefanPenndorf]

Hi @jouni ,

in a Vaadin 24 application I tried to combine MenuBarVariant.LUMO_ICON with MenuBarVariant.LUMO_DROPDOWN_INDICATORS. The MenuBar should consist of a single main item that provides three options via Drop-Down. The main item has an Icon as well as the drop down indicator:

Adding both variants MenuBarVariant.LUMO_ICON and MenuBarVariant.LUMO_DROPDOWN_INDICATORS did remove the drop down indicator. The example for MenuBarVariant.LUMO_ICON in the Vaadin docs useses MenuBar items with and without additional text on the Button and let me think this applies to my use case as well. It wasn't clear to me that MenuBarVariant.LUMO_ICON is intended for icon-only items / icon-bar-items. It wasn't clear to me that it doesn't work with MenuBarVariant.LUMO_DROPDOWN_INDICATORS and beyond that only reduces spacing. The latter was important for my assessment / descission to not use MenuBarVariant.LUMO_ICON (without negative consequences).

Does this help to clarify?

[jouni]

Thanks, that helps to clarify where the documentation is unclear. I’ll try to phrase the update more clearly based on that.