Sub UL classes

[kylekirkby]

Hi @allejo,

Is there a parameter I can use to inject classes into the sub-level ul tags?

BR,

Kyle

[allejo]

There currently is not a parameter that would allow you to do this. You would have to use CSS at the moment.

/* a third sublevel of items */
.my_toc ul ul {}

But this feature should be doable and can be added.

[kylekirkby]

Thanks for your reply @allejo,

I've pivoted and gone with slate for the documentation but it would be still good to be able to add classes to sub ul's :) I might be able to take a look at this at some point but I'm pretty busy on other projects atm.

BR,

Kyle

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[redtide]

This would be useful also to me; I'm working on a documentation website where I would like to have the TOC as a left sidebar widget, which requires the sub ul tags using a "submenu" class.

[allejo]

This just serves as a note/explanation. But basically, in order to achieve this feature, we're going to need to add the "submenu" classes to the end of each list. These are the two situations of when they're going to need to be added.

• When we decrease the level of indentation
• When finish generating the entire TOC, we're going to need to "close" up our remaining lists with classes

- {:.item-1} [Heading 1](#heading-1)
    - {:.item-2} [Heading 2.1](#heading-21)
        - {:.item-3} [Heading 3.1](#heading-31)
        - {:.item-3} [Heading 3.2](#heading-32)
        {:.submenu-2}
    - {:.item-2} [Heading 2.2](#heading-21)
        - {:.item-3} [Heading 3.3](#heading-33)
        - {:.item-3} [Heading 3.4](#heading-34)
        {:.submenu-2}
    {:.submenu-1}

<ul>
  <li class="item-1"><a href="#heading-1">Heading 1</a>
    <ul class="submenu-1">
      <li class="item-2"><a href="#heading-21">Heading 2.1</a>
        <ul class="submenu-2">
          <li class="item-3"><a href="#heading-31">Heading 3.1</a></li>
          <li class="item-3"><a href="#heading-32">Heading 3.2</a></li>
        </ul>
      </li>
      <li class="item-2"><a href="#heading-21">Heading 2.2</a>
        <ul class="submenu-2">
          <li class="item-3"><a href="#heading-33">Heading 3.3</a></li>
          <li class="item-3"><a href="#heading-34">Heading 3.4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

[allejo]

I've created PR #43, if you could take a look and see if that works for you/leave feedback, that'd be great 😄