menu logout item aligment

how to align logout right most corner in menubar .i have added spece in menu bar like
for (int i = 0; i <15; i++) {
menu.addItem(" “, null);
menu.addItem(”|", null);
so it showing at right side top corner but for other monitor it is not coming exacly right corener tell me the correct way of doing it .I want setAlogment proerty for menu bar or any alternative
11868.bmp (3.75 MB)

I don’t think the MenuBar has that kind of features. How about taking the logout button out from the menubar? If you have a HorizontalLayout with the MenuBar and a Button, you can set component alignment on it to make it appear in the right end. Then you probably want to retheme the components to look the way you want it.

Try adding a custom stylename for the menu item (
MenuBar item styles sample
), and then using a bit of CSS to align it. Something like below:

// Java
        final MenuBar.MenuItem logout = menubar.addItem("Logout", null);
        final MenuBar.MenuItem file = menubar.addItem("File", null);
        final MenuBar.MenuItem newItem = file.addItem("New", null);


// CSS
.v-menubar-menuitem-right {
    float: right;

The item with “float: right” should be before any other items, so that the float behaves correctly in all browsers. Semantically not correct, but that’s how it’s the easiest to get working.

Thanks for quick replay

Hi how to remove the space in horizontal layout .my menu bar is in Horizontal layout and one button on top right most corner .it works fine but i m finding gap between menubar and button .please suggest me.Thanks in adavance.Attachement As below
11870.bmp (3.75 MB)

You have to theme the it to make it look like it is continuing. Possibly adding a CssLayout there in between with setSizeFull() and a stylename.

Alternatively, I don’t know if the menu theme will extend if you set menubar.setWidth(“100%”). Probably not but worth the shot.

Thanks for giving Replay i m waiting for this .I will try out and Replay to you
Rather then that i tried with horizontal split panel but it not looks good also i used setsize full for horizantal layout and menu bar set size 100%…-_-

Hey any one with same problem what i m facing is to add another menu bar saying Logout and make horizantal aligment top right .This is simple is looks same as continue menu bar style set expention ration to main menu so it occupies all available space fills the gap in horizantal Layout-–_-

how we can change the horizontal menu to vertical menu

Hey Khan,

Approach #1:

.v-menubar {
    @include display(inline-flex);
    @include flex-direction(column);
    height: auto;

Approach #2:

  .v-menubar {
    height: auto;
  .v-menubar > .v-menubar-menuitem {
    display: block;

Thank You Its work