KSS Knyle Style Sheet - Creating Sub nav for Table of Contents

Question

So I took the KSS template and modified it to work with what we need. But now I have a small issue. Each section is generating and I have it building the Table of Contents for me. But if I have a section such as "Inputs" that contain 6 variations of inputs, I need it to be able to pick up the Sub-section and create the sub-section under the main section in the TOC in my side nav.

Here is what my code looks like now. Everything works really well when generating each section and such, but I cannot figure out how to create the sub sections under the nav on the left. And of course I dont want to manually code them since I'm using KSS.

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="index.html">Overview</a></li>
                {{#eachRoot}}
            <li><a href="section-{{reference}}.html">{{header}}</a></li>
                {{/eachRoot}}
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid bs-docs-container">
        <nav id="side-menu" role="navigation">
            <div class="col-md-2">
                <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top toc-top-margin">
                    <ul class="nav nav-list affix bs-docs-sidenav">
                        {{#if overview}}
                    <li><a href="index.html">Overview</a></li>
                        {{else}}
                            {{#eachSection rootNumber}}
                            {{#if header}}

                        <li><a href="#bs-docs-section-{{reference}}">{{header}}</a></li>
                            {{/if}}
                            {{/eachSection}}
                            {{/if}}
                        <a class="back-to-top" href="#top">Back to top</a>
                    </ul>
                </div>
            </div>
        </nav>

            <div class="col-sm-10 article-contain" data-spy="scroll" data-target="#side-menu" data-offset="0" style="height:200px; position: relative;">
                <div class="kss-content markdown-body">
                    <article class="kss-article">
                          {{#if overview}}
                          <section id="section-0" class="kss-section kss-overview">
                            {{html overview}}
                          </section>
                          {{else}}
                          {{#eachSection rootNumber}}
                          <section id="bs-docs-section-{{reference}}" class="col-sm-12 kss-section kss-depth-{{refDepth}}">
                            <h1 class="kss-title">{{header}}</h1>
                            {{#ifAny markup modifiers}}
                            {{#if description}}
                            <div class="kss-description">
                              {{html description}}
                            </div>
                            {{/if}}

                            <div class="kss-modifier-block">
                              <div class="kss-modifier kss-modifier-original">
                                <div class="kss-modifier-example">
                                  {{modifierMarkup}}
                                </div>
                              </div>
                              {{#eachModifier}}
                              <div class="kss-modifier">
                                <div class="kss-modifier-head">
                                  <div class="kss-modifier-name">{{name}}</div>
                                  <div class="kss-modifier-description">
                                    {{html description}}
                                  </div>
                                </div>
                                <div class="kss-modifier-example">
                                  {{modifierMarkup}}
                                </div>
                              </div>
                              {{/eachModifier}}

                              <div class="kss-markup">
                                <pre><code data-language="html">{{markup}}</code></pre>
                              </div>
                            </div>

                            {{else}}
                            {{#if description}}
                            <div class="kss-description">
                              {{html description}}
                            </div>
                            {{/if}}
                            {{/ifAny}}
                          </section>
                          {{/eachSection}}
                          {{/if}}
                    </article>
                </div>
            </div>
    </div>

Here is what it would generate with an appropriate scss file of course. As you see "Inputs" has many variations but only a main "Inputs" section in the left hand Table of contents.

Answer 1

So I solved the issue. The nav should look like this in order for the sections to generate sub sections.

         <div class="col-md-2 bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top toc-top-margin">
                <nav class="kss-nav" id="side-menu" role="navigation">

                    {{#if overview}}
                    {{else}}
                    <ul class="nav nav-list affix bs-docs-sidenav">
                      {{#eachSection rootNumber}}
                      {{#whenDepth 2}}
                      <li class="kss-menu-item"><a href="#bs-docs-section-{{reference}}"><span class="kss-name">{{header}}</span></a></li>
                      {{/whenDepth}}
                        <ul>
                          {{#whenDepth 3}}
                          <li class="kss-menu-item"><a href="#bs-docs-section-{{reference}}"><span class="kss-name">{{header}}</span></a></li>
                          {{/whenDepth}}
                        </ul>
                      {{/eachSection}}
                      <a class="back-to-top" href="#top">Back to top</a>
                    </ul>
                    {{/if}}
                </nav>
            </div>