Menu Bar adding sinout button

Hi i m created the menu bar which four main manu item and given the width 100% so it occupied full my requrement is i want sinout button inside manu bar top right corner how can i achieve this

Hi,

The bad news is – you can’t place components inside the MenuBar.

The good news is – there’s a simple solution for your problem. Make a HorizontalLayout and add the MenuBar component into this layout. Then, create a Button and add this into the layout also. Set the component alignment for the Button to MIDDLE_RIGHT, and you’re done.

The final piece of news – good or bad, depending on the available amount of CSS knowledge – you’ll need to customize the appearance of HorizontalLayout and/or MenuBar to match each other so it’ll look seamless.

Here’s a quick piece of code to demonstrate:

MenuBar menu = new MenuBar();
menu.addItem("Item #1", null);
menu.addItem("Item #2", null);
menu.addItem("Item #3", null);
menu.addItem("Item #4", null);
		
Button logout = new Button("Logout");
		
HorizontalLayout bar = new HorizontalLayout();
bar.setWidth("100%");
bar.addComponent(menu);
bar.addComponent(logout);
bar.setComponentAlignment(logout, Alignment.MIDDLE_RIGHT);
		
mainWindow.addComponent(bar);

What if that “sinout button” is just another MenuItem. Is there anyway I can push it (the last item) to the right?

Can I insert spaces, fixed or flexible size, between menu items?

What has been suggested by some is having two menu bars side by side, the first one stretching and the other one on the right. This can achieve the same visual effect.

Probably not the only way, but maybe the easiest - search the forum for this if you have problems implementing that approach.

I’ve tried that. It almost works…

myLayout.setSizeFull();
myFirstLeftMenuBar.setSizeFull();
mySecondRightBar.setSizeUndefined();
myLayout.setComponentAlignment(mySecondRightBar, Alignment.MIDDLE_RIGHT);

Gives me a space in-between the two menu bars.

myLayout.setSizeFull();
myFirstLeftMenuBar.setSizeFull();
mySecondRightBar.setSizeUndefined();
myLayout.setComponentAlignment(mySecondRightBar, Alignment.MIDDLE_RIGHT);

Gives me one continuous looking menu bar, but the second/right part start roughly at the middle of the window.

If myLayout is a HorizontalLayout, try adding

[code]
myLayout.setExpandRatio(myFirstLeftMenuBar, 1);

[/code].

Switch to GridLayout instead of HorizontalLayout, and then do this:

    myLayout.setWidth(100, UNITS_PERCENTAGE);
    myLayout.setColumnExpandRatio(0, 1000F);
    myLayout.setColumnExpandRatio(1, 0.001F);

This seems to work for me.

    myLayout.setExpandRatio(myTaskBar, 1000F);
    myLayout.setExpandRatio(mySystemBar, 0.001F);

That also works, thanks. I switched back to HorizontalLayout.

Good day pls am having issues with adding a vaain icon to my menubar.

menuBar.add( new RouterLink (“Home”, HomeView.class));

menuBar.add( new RouterLink ( VaadinIcon.Home,“Home”, HomeView.class));- i get an error here.

                                   thx

olu mide:
Good day pls am having issues with adding a vaain icon to my menubar.

menuBar.add( new RouterLink ( VaadinIcon.Home,“Home”, HomeView.class));- i get an error here.

Try something like this instead:

RouterLink routerLink = new RouterLink("", MainView.class);
routerLink.add(VaadinIcon.HOME.create(), new Text("Home"));
menuBar.addItem(routerLink);

Good day Thx so much.it works ,just need to add some space to it.

Pls i need to use the vaadin components for V14. the login page to be exact. https://vaadin.com/components/vaadin-login/html-examples. Where do i paste the script?
How is it installed on an already exisitng application?

The login i have is a simple button from one of you lessons.

  @Route("login")
public class LoginView extends Composite<Div> implements HasComponents {
	public LoginView() {
		add(new Button("Login", e -> {
			VaadinSession.getCurrent().setAttribute("userLoggedIn", true);
			Object intendedPath = VaadinSession.getCurrent().getAttribute("intendedPath");
			UI.getCurrent().navigate(Optional.ofNullable(intendedPath).map(Object::toString).orElse(""));
		}));
	}
} 
Just want to use a component login and formlayout among others . thx

You probably want to look at the Java examples: https://vaadin.com/components/vaadin-login/java-examples