diff --git a/src/Templates/default/html/toc-item.html.twig b/src/Templates/default/html/toc-item.html.twig
index eb32df5..b965561 100644
--- a/src/Templates/default/html/toc-item.html.twig
+++ b/src/Templates/default/html/toc-item.html.twig
@@ -3,7 +3,8 @@
 
     {% if tocItem.children|length %}
         {% include "toc-level.html.twig" with {
-            tocItems:tocItem.children
+            tocItems: tocItem.children,
+            toc_deep_level: toc_deep_level + 1
         } %}
     {% endif %}
 </li>
diff --git a/src/Templates/default/html/toc-level.html.twig b/src/Templates/default/html/toc-level.html.twig
index e8f4d88..1bdaef8 100644
--- a/src/Templates/default/html/toc-level.html.twig
+++ b/src/Templates/default/html/toc-level.html.twig
@@ -1,7 +1,7 @@
 {% apply spaceless %}
-    <ul>
+    <ul class="toctree toctree-level-{{ toc_deep_level ?? 1 }} toctree-length-{{ tocItems|length }}">
         {% for tocItem in tocItems %}
-            {% include "toc-item.html.twig" %}
+            {% include "toc-item.html.twig" with { toc_deep_level: 1 } %}
         {% endfor %}
     </ul>
 {% endapply %}
diff --git a/src/Templates/default/html/toc.html.twig b/src/Templates/default/html/toc.html.twig
index 18ad196..cad7ccd 100644
--- a/src/Templates/default/html/toc.html.twig
+++ b/src/Templates/default/html/toc.html.twig
@@ -1,5 +1,5 @@
 {% apply spaceless %}
-    <div class="toctree-wrapper compound">
+    <div class="toctree-wrapper">
         {% include "toc-level.html.twig" %}
     </div>
 {% endapply %}
diff --git a/tests/fixtures/expected/build-pdf/book.html b/tests/fixtures/expected/build-pdf/book.html
index 2fd78c0..a4e1d46 100644
--- a/tests/fixtures/expected/build-pdf/book.html
+++ b/tests/fixtures/expected/build-pdf/book.html
@@ -6,8 +6,8 @@
         <h1 id="book-index-book">Book</h1>
         <img src="_images/symfony-logo.png">
         <p>Here is a link to the <a href="#index" class="reference internal">main index</a></p>
-        <div class="toctree-wrapper compound">
-            <ul>
+        <div class="toctree-wrapper">
+            <ul class="toctree toctree-level-1 toctree-length-2">
                 <li><a href="https://symfony.com/doc/4.0/book/first-page.html#first-page">First page</a></li>
                 <li><a href="https://symfony.com/doc/4.0/book/second-page.html#second-page">Second page</a></li>
             </ul>
diff --git a/tests/fixtures/expected/main/index.html b/tests/fixtures/expected/main/index.html
index 0d05b98..0e28229 100644
--- a/tests/fixtures/expected/main/index.html
+++ b/tests/fixtures/expected/main/index.html
@@ -9,10 +9,10 @@ <h1 id="some-test-docs">
         <a class="headerlink" href="#some-test-docs" title="Permalink to this headline">Some Test Docs!</a>
     </h1>
     <img src="_images/symfony-logo.png" />
-    <div class="toctree-wrapper compound">
-        <ul>
+    <div class="toctree-wrapper">
+        <ul class="toctree toctree-level-1 toctree-length-2">
             <li><a href="datetime.html#datetimetype-field">DateTimeType Field</a>
-                <ul>
+                <ul class="toctree toctree-level-2 toctree-length-4">
                     <li><a href="datetime.html#field-options">Field Options</a></li>
                     <li><a href="datetime.html#overridden-options">Overridden Options</a></li>
                     <li><a href="datetime.html#field-variables">Field Variables</a></li>
diff --git a/tests/fixtures/expected/toctree/index.html b/tests/fixtures/expected/toctree/index.html
index 07302c6..a8432bb 100644
--- a/tests/fixtures/expected/toctree/index.html
+++ b/tests/fixtures/expected/toctree/index.html
@@ -6,40 +6,40 @@
 <body>
 <div class="section">
 <h1 id="toctree"><a class="headerlink" href="#toctree" title="Permalink to this headline">Toctree</a></h1>
-<div class="toctree-wrapper compound">
-    <ul>
+<div class="toctree-wrapper">
+    <ul class="toctree toctree-level-1 toctree-length-1">
         <li><a href="file.html#title">Title</a>
-            <ul>
+            <ul class="toctree toctree-level-2 toctree-length-1">
                 <li><a href="file.html#sub-title">Sub title</a></li>
             </ul>
         </li>
     </ul>
 </div>
-<div class="toctree-wrapper compound">
-    <ul>
+<div class="toctree-wrapper">
+    <ul class="toctree toctree-level-1 toctree-length-1">
         <li><a href="file.html#title">Title</a></li>
     </ul>
 </div>
-<div class="toctree-wrapper compound">
-    <ul>
+<div class="toctree-wrapper">
+    <ul class="toctree toctree-level-1 toctree-length-1">
         <li><a href="directory/another_file.html#another-file">Another file</a></li>
     </ul>
 </div>
-<div class="toctree-wrapper compound">
-    <ul>
+<div class="toctree-wrapper">
+    <ul class="toctree toctree-level-1 toctree-length-3">
         <li><a href="index.html#toctree">Toctree</a></li>
         <li><a href="directory/another_file.html#another-file">Another file</a></li>
         <li><a href="file.html#title">Title</a>
-            <ul>
+            <ul class="toctree toctree-level-2 toctree-length-1">
                 <li><a href="file.html#sub-title">Sub title</a></li>
             </ul>
         </li>
     </ul>
 </div>
-<div class="toctree-wrapper compound">
-    <ul>
+<div class="toctree-wrapper">
+    <ul class="toctree toctree-level-1 toctree-length-3">
         <li><a href="file.html#title">Title</a>
-            <ul>
+            <ul class="toctree toctree-level-2 toctree-length-1">
                 <li><a href="file.html#sub-title">Sub title</a></li>
             </ul>
         </li>
