Vertically Stacked Tabs

[dhruv4]

Hey! Would it be possible to have vertically stacked, scrollable tabs? I'd like the same effect as the currently implemented tabs, but just in a vertical fashion (like here: https://jqueryui.com/tabs/#vertical).

Thanks! BTW I really love using Materialize :)

[dhruv4]

UPDATE: I was able to achieve the same thing using a bit of Javascript and a well placed Side-nav. But, I'd still appreciate a native solution.

[SuperDJ]

You could make a pull request with your JavaScript. It eventually might be used

[halhenke]

You don't really have to delve into Javascript to achieve something like the effect of that jQuery plugin. Just adding something like:

ul.tabs
  flex-direction: column
  height: 100%
  float: left
  width: 20%

to override some of the default style (most importantly the flex-direction) gets you halfway there (you'll need more work to have it look not hideous).

You could then hide the indicator bar

ul.tabs .indicator
  display: none

and add some more styles to show which tab is active e.g.

ul.tabs li.active
  background-color: fuschia

etc

[typekpb]

please note width: 20% would not help here. See: #2564.

[agalazis]

+1 for this it should be part of the framework

[stap123]

+1 this would be useful

[ianarsenault]

+1

[stap123]

Thought I would post what I ended up doing in case it's useful for anyone else.

scss file

.tabs-vertical {
    .tabs {
        height: auto;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        display: -webkit-flex;
        display: flex;
    }

    .tab {
        width: 100%;

        .active {
            -moz-transition: border-color .5s ease;
            -o-transition: border-color .5s ease;
            -webkit-transition: border-color .5s ease;
            transition: border-color .5s ease;
            border-right: 3px solid #424242;
        }

        :hover {
            border-right: 3px solid #eeeeee;
        }
    }

    .indicator {
        display: none;
    }
}

Example HTML

<div class="row">
    <div class="tabs-vertical">
        <div class="col s4 m3 l2">
            <ul class="tabs">
                <li class="tab">
                    <a class="active" href="#ActiveDirectory">Active Directory</a>
                </li>
                <li class="tab">
                    <a href="#Smtp">SMTP (Email)</a>
                </li>
                <li class="tab">
                    <a href="#General">General</a>
                </li>
            </ul>
        </div>
        <div class="col s8 m9 l6">
            <div id="ActiveDirectory" class="tab-content"></div>
            <div id="Smtp" class="tab-content"></div>
            <div id="General" class="tab-content"></div>
        </div>
    </div>
</div>

Output

[vito8916]

Vertical Tabs - Materialize

I would like to share this code to achieve better vertical tabs published by @stap123 .

I just got better and stylize the Code of @stap123

I'm using these tabs on a .sideNav and they looks great and works great, also i´m using zmdi-icons

.scss

.tabs-vertical {
    .tabs {
        height: auto;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .tab {
        width: 100%;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        display: block;
        float: left;
        text-align: left;
        line-height: 48px;
        height: 48px;
        padding: 0;
        margin: 0;
        text-transform: uppercase;
        text-overflow: ellipsis;
        .active {
            -moz-transition: border-color .5s ease;
            -o-transition: border-color .5s ease;
            -webkit-transition: border-color .5s ease;
            transition: border-color .5s ease;
            border-right: 3px solid $tabs-underline-color;
            color: $tabs-text-color;
        }
        :hover {}
        a {
            color: $tabs-text-color;
            display: block;
            width: 100%;
            height: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            @include transition( color .28s ease);
            &:hover {
                color: lighten($tabs-text-color, 20%);
            }
        }
        &.disabled a {
            color: lighten($tabs-text-color, 20%);
            cursor: default;
        }
    }
    .indicator {
        display: none;
    }
}

HTML

<div class="tabs-vertical ">
    <div class="col s4 m3 l2">
        <ul class="tabs">
           <li class="tab">
              <a class="waves-effect waves-cyan" href="#appsDir"><i class="zmdi zmdi-apps"></i>Apps</a>
           </li>
           <li class="tab">
             <a class="waves-effect waves-cyan" href="#emailDir"><i class="zmdi zmdi-email"></i>Email</a>
           </li>
           <li class="tab">
             <a class="waves-effect waves-cyan" href="#codeDir"><i class="zmdi zmdi-code"></i>Code</a>
           </li>
        </ul>
     </div>
     <div class="col s8 m9 l6">
          <div id="appsDir" class="tab-content"></div>
          <div id="emailDir" class="tab-content"></div>
          <div id="codeDir" class="tab-content"></div>
     </div>
</div>

Compile .css code

.tabs-vertical .tabs {
  height: auto;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column; }
.tabs-vertical .tab {
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: block;
  float: left;
  text-align: left;
  line-height: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  text-overflow: ellipsis; }
  .tabs-vertical .tab .active {
    -moz-transition: border-color .5s ease;
    -o-transition: border-color .5s ease;
    -webkit-transition: border-color .5s ease;
    transition: border-color .5s ease;
    border-right: 3px solid #7280ce;
    color: #3f51b5; }
  .tabs-vertical .tab a {
    color: #3f51b5;
    display: block;
    width: 100%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-transition: color 0.28s ease;
    -moz-transition: color 0.28s ease;
    -o-transition: color 0.28s ease;
    -ms-transition: color 0.28s ease;
    transition: color 0.28s ease; }
    .tabs-vertical .tab a:hover {
      color: #8591d5; }
  .tabs-vertical .tab.disabled a {
    color: #8591d5;
    cursor: default; }
.tabs-vertical .indicator {
  display: none; }

Preview...

[ghost]

+1 for this being part of the framework

Thanks for adding the styling

[perfectunicorn]

Doesn't work for me @vito8916 :(

[silverdr]

@stap123 I needed to add

display: -webkit-flex;

and

display: flex;

to .tabs to make it work as expected (at least in Safari).

[stap123]

@silverdr I have updated the code above to include the display: flex; line.

Is -webkit-flex a valid value for display? I can't find any reference for it anywhere.

[silverdr]

@stap123 check this one: http://www.w3schools.com/cssref/css3_pr_flex-direction.asp

[stap123]

@silverdr wow ok, I actually checked the w3schools reference for the display property and it's not listed on there :) http://www.w3schools.com/cssref/pr_class_display.asp

I have added that as well. (I must admit I tend not to worry about Safari, slap on the wrist! Most of my clients don't use it)

[silverdr]

@stap123 It is listed there in the browser support section. Still - I fully understand. It's just not the same case here. I need to cover more Safari than IE for example ;-)

[stap123]

@silverdr completely missed that, my bad. Thanks for pointing it out

[tomscholz]

I am sorry but vertical tabs are not part of the material design specification

[stap123]

Disappointing response. Not part of the spec but something that people clearly wanted from a css framework such as this.

Any suggestions on what would be correct equivalent according to the spec? If not surely that highlights that the M.D. team at Google missed something that is needed

[acburst]

While not specifically in the material specs, I think this is something that could be looked into as it has practical uses in many projects.

[fega]

maybe this could help as inspiration or reference

https://angular.io/docs/ts/latest/

[jsamuel89]

@stap123 Thanks for your code.How do i hide the other tab content that are not active?? My codepen https://codepen.io/jsamuel89/pen/aqNzEb?editors=1100

[stap123]

@jsamuel89 It works if you add JQuery to your pen, I forked it and added that https://codepen.io/anon/pen/oExbXN

[jsamuel89]

@stap123 Thank you so much..!! One more question how do i make the position of tabs menu to be fixed so that even if the tab-content is long navigation will be available in the left

[stap123]

@jsamuel89 Not sure exactly how off the top of my head, but you could look at using the pushpin functionality of Materializecss http://next.materializecss.com/pushpin.html

[hoogw]

https://codepen.io/jsamuel89/pen/aqNzEb

I tried all of above, but found the best simple solution is this one https://codepen.io/jsamuel89/pen/aqNzEb

All you need to do is add extra css, overwrite the default horizontal tab, convert it to vertical tab on the fly.

The original is scss, you must use compiled version to add to your page style tag

add below in your page style tag

this is html

this is result

[hoogw]

after read and test advise from both @jsamuel89 @stap123

I finally make it works. Great job for both of you.

This is my fully working sample on codepen

For those who only need bare vertial tab, nothing else, I just create a extremely simple, striped, vertical tab only sample

materialized css vertical tab on codepen