How to put a menu item on the far right of the menuBar?

Flow
1

I need to put a button for logout and align it to the right, I don’t see any menuBar option that allows me to do this. How can I achieve this?

2

You can target specific menu items with e.g. a class name and using flex properties to position it if the menu bar has 100% width

3

First, I suggest you learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Assuming, you are using HorizontalLayout, which is a flexbox.

You can use the CSS margin property. Make sure the width of the menu bar container is 100%. THIS IS NOT DEFAULT FOR HorizontalLayout. Create a container (HorizontalLayout or Div, for example) for both the left and right contents. Add your left/right content to those containers. Add those containers (left first) to the menu bar. Either style the left container with margin-right: auto or right container with margin-left: auto.

You can also use the CSS justify-content property. This will only work if your menu bar container is a flexbox (e.g., HorizontalLayout). Again, make sure its width is 100% and create and add two containers for left/right content. And add justify-content: space-between to the menu bar container.

4

Would be good to see a screenshot/mockup of the UI you’re trying to create. Now I’m wondering why are you using MenuBar, if you just need a single button for logging out?

5

I think he has a requirement to create the menu on the top left and the logout on the right side - I had a similar requirement in the past e.g like this https://i.stack.imgur.com/uYrBl.png

6

Right. In that case, I wonder if start.vaadin.com would be helpful:

8

That could work but that would mean to split the menu in two parts, I wanted to have a single menu especially for mobile (can send you a picture in private)

9

Thanks! Right, that is where I’m not sure what is needed, if/how the menu items should collapse together somehow.