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

This codepen by Rahul Sagore uses vanilla Material, not specifically for Angular, but it's exactly what you want. I was looking for the same thing as you; it's a shame Material doesn't offer this, but I can see how it would go against their principles and make Material too extensive.

It comprises of custom css (perhaps overriding, I'm not sure) and use of particular Material classnames. Below I've pasted the contents into a snippet.

I had an issue with the mdl-cell--n-col classes so I changed the content one from 10-col to 6-col so it wouldn't wrap the content beneath the tabs in the restrictive space of this post. You'll probably have to tinker with that yourself, or scrap that and use Material styles the way you know how. Similarly, I cannot see what the .hollow-circle spans are doing, so perhaps they aren't needed.

/*Vertical Tabs*/
.vertical-mdl-tabs {
    margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-bottom: 35px;
    height: inherit;
    border-bottom: none;
    border-right: 1px solid rgba(10, 11, 49, 0.20);
}

.vertical-mdl-tabs .mdl-tabs__tab {
    width: 100%;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    letter-spacing: 2px;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
    border-right: 2px solid #ED462F;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    content: inherit;
    height: 0;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
    padding: 0 30px;
}

.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
    text-align: left;
}

<script src="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
    <div class="mdl-grid mdl-grid--no-spacing">
      <div class="mdl-cell mdl-cell--2-col">
          <div class="mdl-tabs__tab-bar">
             <a href="#tab1-panel" class="mdl-tabs__tab is-active">
                 <span class="hollow-circle"></span>
                  Tab 1
             </a>
             <a href="#tab2-panel" class="mdl-tabs__tab">
                  <span class="hollow-circle"></span>
                  Tab 2
              </a>
              <a href="#tab3-panel" class="mdl-tabs__tab">
                  <span class="hollow-circle"></span>
                  Tab 3
              </a>
         </div>
       </div>
       <div class="mdl-cell mdl-cell--6-col">
            <div class="mdl-tabs__panel is-active" id="tab1-panel">
                 Content 1
            </div>
            <div class="mdl-tabs__panel" id="tab2-panel">
                 Content 2
            </div>
            <div class="mdl-tabs__panel" id="tab3-panel">
                  Content 3
            </div>
        </div>
    </div>
</div>

Answer 2

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>