You could try doing this through CSS. If you add a class to the tab container, say vtab, then you could try adding something like the following to your custom css file:
.vtab .mx-tabcontainer-tabs {
transform: rotate(270deg);
transform-origin: left;
position: relative;
top: 430px;
margin-left: 6px;
}
.vtab .mx-tabcontainer-content {
margin-left: 10px;
}
.vtab .mx-tabcontainer-pane {
margin-left: 20px;
}
.vtab .nav-tabs {
border-bottom: 0;
}
You may need to adjust the positioning elements above to suit your theme. It should end up looking something like this
Edit:
Updated CSS which gives slightly better results - the first tab is at the top:
.vtab {
margin-top: -40px;
}
.vtab .mx-tabcontainer-tabs {
transform: rotate(90deg);
transform-origin: left;
position: relative;
margin-left: 6px;
top: 24px;
}
.vtab .nav-tabs > li {
transform: rotate(180deg);
}
.vtab .mx-tabcontainer-content {
margin-left: 10px;
}
.vtab .mx-tabcontainer-pane {
margin-left: 20px;
}
.vtab .nav-tabs {
border-bottom: 0;
}
Vertical tabs don't exist.
Think there are 2 solutions:
A list-view with a listen to list-view dataview.
An interface layout with a project navigation menu integrated in it on either the left or right side of a container, re-use the layout throughout the pages you wanted as "tabs" and link the menu to all these pages.
Hi Jason,
There is a custom widget for that that you can download from the appstore:
https://appstore.home.mendix.com/link/app/894/ - Tab Extension (Dynamic tab names, Buttons)
I haven't used it myself yet, but it does say it has vertical tabs :)
Please let me know if this works when you decide to try it!
Albert