Vertical ion-tabs

Ionic Framework
1

Has anyone tried to put the ion-tabs in vertical mode, so the tabs are on the left (or right) side of the screen. The idea is to have a UI very similar to the one of Slack for instance.

Right now, ion-tabs is only horizontal, top or bottom of the screen.

The simpler approach would be to put ion-tabs in the flex direction of row so that ion-tab-bar and the content are side-by-side instead of top bottom of each other.

#ion-tabs {
flex-direction:row;
}

But it requires more CSS rules because the width of ion-tab-bar seems to be constrained to 0.

Has anyone experimented with such hack?

1 Like
2

Hi, I’m also facing the same issue, but I think I’m in the middle of the solution, this code will make the tab menu on right side of the screen but the content of the tabs has disappeared, I’m trying to figure out why, here is the code :

ion-tabs {
display: flex;
flex-direction: column;
height: 100%;
}

ion-tab-bar {
display: flex;
flex-direction: column;
height: 100%;
width: 10%;
}

1 Like