Vertical Navbar in Bootstrap 3 using UiBinder - gwt

Question

I have a Navbar in my project (GWT, GWTBootstrap3, UiBinder), I would like to make vertical in UiBinder.
In HTML it is quite simple
<div class = "nav nav-pills nav-stacked col-sm-3">
<li> <a> Home </a> </li>
<li> <a> Settings</a> </li>
</div>
But it must be possible to do the same in UiBinder. As far as I understand it is only possible to set the position of the Navbar to FIXED_TOP, FIXED_BOTTON and one more.
My code looks like this
<g:HTMLPanel>
<g:ScrollPanel>
<b:Container >
<b:Navbar position="FIXED_TOP">
<b:Container>
<b:NavbarHeader>
<b:NavbarBrand targetHistoryToken="{nameTokens.getHome}" ui:field="brand" text="{resources.ProductName}" />
<b:NavbarCollapseButton dataTarget="#navbar-collapse" />
</b:NavbarHeader>
<b:NavbarCollapse b:id="navbar-collapse">
<b:NavbarNav>
<b:ListDropDown ui:field="admindropdown">
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.CardHolder}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Employee}" targetHistoryToken="{nameTokens.getCardholderlist}" />
<b:AnchorListItem text="{resources.Guest}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Vendor}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.User}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Technician}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Cloud}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.Configuration}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getCustomerlist}" />
<b:AnchorListItem text="{resources.Company}" targetHistoryToken="{nameTokens.getCompanylist}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.ProductNameServer}" targetHistoryToken="{nameTokens.getCloudlist}" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
<b:NavbarNav pull="RIGHT">
<b:ListDropDown >
<b:AnchorButton text="{resources.SelectedLanguage}" dataToggle="DROPDOWN" />
<b:DropDownMenu >
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageDK" url="/images/DK.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageNO" url="/images/NO.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageUK" url="/images/UK.png" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown ui:field="loginfield">
<b:AnchorButton dataToggle="DROPDOWN" ui:field="loginname" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.LogOut}" ui:field="logoutitem" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
</b:NavbarCollapse>
</b:Container>
</b:Navbar>
<b:Row>
<b:Column size="XS_12">
<g:SimplePanel ui:field="contentContainer" />
</b:Column>
</b:Row>
</b:Container>
</g:ScrollPanel>
</g:HTMLPanel>

Answer 1

It seems you are mistaking Navbar with Navs - your HTML example uses nav-pills, while the UiBinder one uses a Navbar (navbar, navbar-header, etc.). As far as I can tell (from the Bootstrap's and gwtbootstrap3's documentation) it is not possible to achieve a vertical ("stacked", as they call it in the docs) Navbar. But it is possible to get vertical/stacked NavPills:
<b:NavPills stacked="true">
<b:AnchorListItem active="true">Item 1</b:AnchorListItem>
<b:AnchorListItem>Item 2</b:AnchorListItem>
<b:AnchorListItem>Item 3</b:AnchorListItem>
</b:NavPills>
See the demo for more examples.

Answer 2

I took another approach to the problem, and made use of the grid system in bootstrap. So when we are at a desktop I show a side navigation bar, and when on a tablet/phone I show the Navbar. It needs to be tweaked a bit, but this is the essential part of the problem I had.
Here is my code for UiBinder
<b:Container>
<b:Row>
<b:Column size="XS_12,SM_12,MD_10,LG_10" visibleOn="XS_SM">
<b:Navbar position="FIXED_TOP">
<b:Container>
<b:NavbarHeader>
<b:NavbarBrand targetHistoryToken="{nameTokens.getHome}"
ui:field="brand" text="{resources.ProductName}" />
<b:NavbarCollapseButton dataTarget="#navbar-collapse" />
</b:NavbarHeader>
<b:NavbarCollapse b:id="navbar-collapse">
<b:NavbarNav>
<b:ListDropDown ui:field="admindropdown">
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.CardHolder}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Employee}" targetHistoryToken="{nameTokens.getCardholderlist}" />
<b:AnchorListItem text="{resources.Guest}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Vendor}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.User}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Technician}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Cloud}" targetHistoryToken="{nameTokens.getHome}" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton dataToggle="DROPDOWN" text="{resources.Configuration}" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getCustomerlist}" />
<b:AnchorListItem text="{resources.Company}" targetHistoryToken="{nameTokens.getCompanylist}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.ProductNameServer}" targetHistoryToken="{nameTokens.getCloudlist}" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
<b:NavbarNav pull="RIGHT">
<b:ListDropDown addStyleNames="{style.languageImageStyle}">
<b:Image url="{resources.SelectedLanguageURL}" />
</b:ListDropDown>
<b:ListDropDown>
<b:AnchorButton text="{resources.SelectedLanguage}" dataToggle="DROPDOWN" />
<b:DropDownMenu>
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageDK" url="/images/DK.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageNO" url="/images/NO.png" />
<b:Image addStyleNames="btn {style.btnStyle}" ui:field="languageUK" url="/images/UK.png" />
</b:DropDownMenu>
</b:ListDropDown>
<b:ListDropDown ui:field="loginfield">
<b:AnchorButton dataToggle="DROPDOWN" ui:field="loginname" />
<b:DropDownMenu>
<b:AnchorListItem text="{resources.LogOut}" ui:field="logoutitem" />
</b:DropDownMenu>
</b:ListDropDown>
</b:NavbarNav>
</b:NavbarCollapse>
</b:Container>
</b:Navbar>
</b:Column>
</b:Row>
<b:Row>
<b:Column size="MD_3,LG_3" visibleOn="MD_LG">
<b:Panel>
<b:PanelBody>
<b:PanelGroup b:id="accordion">
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseOne" text="{resources.CardHolder}"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseOne" in="true" ui:field="collapseOne">
<b:PanelBody>
<b:AnchorListItem text="{resources.Employee}" targetHistoryToken="{nameTokens.getCardholderlist}" />
<b:AnchorListItem text="{resources.Guest}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Vendor}" targetHistoryToken="{nameTokens.getHome}" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseTwo" text="{resources.User}"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseTwo" in="true">
<b:PanelBody>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Technician}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.Cloud}" targetHistoryToken="{nameTokens.getHome}" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseThree" text="{resources.Configuration}"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseThree" in="true">
<b:PanelBody>
<b:AnchorListItem text="{resources.Customer}" targetHistoryToken="{nameTokens.getCustomerlist}" />
<b:AnchorListItem text="{resources.Company}" targetHistoryToken="{nameTokens.getCompanylist}" />
<b:AnchorListItem text="{resources.Portal}" targetHistoryToken="{nameTokens.getHome}" />
<b:AnchorListItem text="{resources.ProductNameServer}" targetHistoryToken="{nameTokens.getCloudlist}" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseFour" text="Sprog"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseFour" in="true">
<b:PanelBody>
<b:Image addStyleNames="btn" ui:field="languageDK2" url="/images/DK.png" />
<b:Image addStyleNames="btn" ui:field="languageNO2" url="/images/NO.png" />
<b:Image addStyleNames="btn" ui:field="languageUK2" url="/images/UK.png" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
<b:Panel>
<b:PanelHeader>
<b:Heading size="H4">
<b:Anchor dataToggle="COLLAPSE" dataTarget="#collapseFive" text="Login"/>
</b:Heading>
</b:PanelHeader>
<b:PanelCollapse b:id="collapseFive" in="true">
<b:PanelBody>
<b:AnchorListItem text="{resources.LogOut}" ui:field="logoutitem2" />
</b:PanelBody>
</b:PanelCollapse>
</b:Panel>
</b:PanelGroup>
</b:PanelBody>
</b:Panel>
</b:Column>
<b:Column size="XS_12,SM_12,MD_9,LG_9">
<g:SimplePanel ui:field="contentContainer" />
</b:Column>
</b:Row>
</b:Container>