Angular Material mdTabs : is it possible to have vertical tabs?

Question

I am looking for Tabs displayed top to bottom with tab navigation on the left. Is there anyway this can be achieved in Angular Material library?

Answer 1

you can have verticval tabs by adding vertical attribute to the mat-tab-group and adding following css to your page.

mat-tab-group[vertical] .mat-tab-labels {
    display: flex;
    flex-direction: column!important;
}

mat-tab-group[vertical] {
    display: flex;
    flex-direction: row!important;
}

here's the mat-tab-group element with vertical attribute

<mat-tab-group flex="1" vertical>
  <mat-tab label="Tab 1">  Loading ... </mat-tab>
  <mat-tab label="Tab 2" > Loading ... </mat-tab>
</mat-tab-group>