Which Material Design framework can I use for supporting Nested Tabs in my website?

Question

I am building a web page which is going to have Nested Tabs. And I want it to have Material Design. I had been using Material Design Lite but based on my experience, as well as this, this and this link, I don't think that Material Design Lite supports or is going to support Nested tabs.

So which material design framework should I use to support Nested Tabs in my web page?

Answer 1

I use MaterializeCSS. Although it is still in beta, Materialize has a good set of components and it is updated quite often. Here is an example of simple nested tabs.

$(() => {
  $('ul.tabs').tabs();
});

body {
  padding-top: 1em;
  background: skyblue;
}

div[id] {
  padding-top: 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

<div class="row">
  <div class="col s12">
    <ul class="tabs z-depth-1">
      <li class="tab"><a href="#first-tab">First tab</a></li>
      <li class="tab"><a href="#second-tab">Second tab</a></li>
    </ul>
    <div id="first-tab">First tab</div>
    <div id="second-tab">
      <ul class="tabs z-depth-1">
        <li class="tab"><a href="#second-child-first">First child tab</a></li>
        <li class="tab"><a href="#second-child-second">Second child tab</a></li>
      </ul>
      <div id="second-child-first">Second child first</div>
      <div id="second-child-second">Second child second</div>
    </div>
  </div>
</div>