Responsive MenuBar: Fill up empty space between two MenuBars

Flow
1

Hello,

I’m trying to create a layout with two MenuBar components inside a HorizontalLayout : one aligned to the left and one aligned to the right.

Visually, the intended result looks like this:
image

Currently, both MenuBar components are set to full width, so each one takes up half of the available space in the container. This works as long as both sides have a similar number of items.

However, when one side contains more items than the other, I would like that side to use the remaining free space. Even though there is still enough space in the layout, the last item collapses into the overflow menu:
image

What I would like instead is:

  • Each MenuBar should grow if there is available space.
  • But their width should be limited to the width required to display all items (i.e., no unnecessary empty space).
  • If one side requires more space than the other, it should be able to use the remaining width.

I tried several approaches, including setting the width to fit-content , since the goal is for each MenuBar to grow as needed but not exceed the width required to display all items. Unfortunately, none of these attempts solved the issue so far.

Has anyone implemented a similar layout or found a good way to achieve this behavior with MenuBar inside a HorizontalLayout ? I am not sure how the MenuBar overflow-menu works yet, so I can not decide whether this is worthy of a GitHub Issue, or it is a mistake on my end.

2

I forgot to add:
When I only set justify-content: space-between on the container, and leave the MenuBar css as it is, the buttons overflow the container and there seems to be no overflow type that prevents it:
image

3

Hi Evgeni,

The MenuBar’s overflow handling is a bit tricky to get working in general, and even more so in this situation.
One of the problems is that it often fails to shrink at all, especially in a flexbox (like HorizontalLayout).
We tried addressing this by setting a specific min-width on it, but that caused other issues.

The way to make this work is to setMinWidth(“0”) (or some other small value) on each MenuBar, and apply the END_ALIGNED variant to the right-hand MenuBar:

        var mb1 = new MenuBar();
        mb1.setMinWidth("0");

        var mb2 = new MenuBar();
        mb2.addThemeVariants(MenuBarVariant.LUMO_END_ALIGNED);
        mb2.setMinWidth("0");

        var hl = new HorizontalLayout();
        hl.setWidthFull();
        hl.addAndExpand(mb1);
        hl.addAndExpand(mb2);

We have plans to modernize the overflow handling in MenuBar, and make it easier to get working, but it’s difficult to find a way to do that without altering the component’s behavior in a way that breaks existing applications.

I couldn’t find an existing issue for it, so I created one: MenuBar's overflow handling is difficult to get working in most situations · Issue #11269 · vaadin/web-components · GitHub

4

Hi Rolf,

Setting min-width: 0 helped a lot.

Now I’m facing the next issue: only one MenuBar collapses while the other one does not. Is there a way to force both MenuBars to collapse equally?

image

Since the component seems to be a bit glitchy, I assume there might not be a perfect solution. However, it already works well enough for now.

Thank you very much!

5

Unfortunately it does behave a bit weirdly in that configuration: both MenuBars are kind of “competing” for the space, and which one collapses first probably depends on which is wider by default (but it could also be a bit more complicated than that due to the way the overflow detection interacts with the browser’s flexbox handling). I suspect there’s no way to make it less glitchy at the moment.