diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
index 5455b7782b..66babfc0bc 100644
--- a/layouts/partials/sidebar-tree.html
+++ b/layouts/partials/sidebar-tree.html
@@ -1,5 +1,6 @@
 {{/* We cache this partial for bigger sites and set the active class client side. */}}
-{{ $shouldDelayActive := ge (len .Site.Pages) 2000 }}
+{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 }}
+{{ $shouldDelayActive := ge (len .Site.Pages) $sidebarCacheLimit }}
 <div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
   {{ if not .Site.Params.ui.sidebar_search_disable }}
   <form class="td-sidebar__search d-flex align-items-center">
@@ -24,36 +25,42 @@
     </div>
     {{ end }}
     {{ $navRoot := cond (and (ne .Params.toc_root true) (eq .Site.Home.Type "docs")) .Site.Home .FirstSection }}
-    {{ template "section-tree-nav-section" (dict "page" . "section" $navRoot "delayActive" $shouldDelayActive)  }}
+    {{ $ulNr := 0 }}
+    {{ $ulShow := cond (isset .Site.Params.ui "ul_show") .Site.Params.ui.ul_show 1 }}
+    {{ $sidebarMenuTruncate := cond (isset .Site.Params.ui "sidebar_menu_truncate") .Site.Params.ui.sidebar_menu_truncate 50 }}
+    <ul class="td-sidebar-nav__section pr-md-3 ul-{{ $ulNr }}">
+      {{ template "section-tree-nav-section" (dict "page" . "section" $navRoot "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}
+    </ul>
   </nav>
 </div>
 {{ define "section-tree-nav-section" }}
-{{ $s := .section }}
-{{ $p := .page }}
-{{ $shouldDelayActive := .delayActive }}
-{{ $active := eq $p.CurrentSection $s }}
-{{ $show := or (and (not $p.Site.Params.ui.sidebar_menu_compact) ($p.IsAncestor $s)) ($p.IsDescendant $s) }}
-{{ $sid := $s.RelPermalink | anchorize }}
-<ul class="td-sidebar-nav__section pr-md-3">
-  <li class="td-sidebar-nav__section-title">
-    <a  href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if not $show }} collapsed{{ end }}{{ if $active}} active{{ end }} td-sidebar-link td-sidebar-link__section">{{ $s.LinkTitle }}</a>
-  </li>
-  <ul>
-    <li class="collapse {{ if $show }}show{{ end }}" id="{{ $sid }}">
-      {{ $pages := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true }}
-      {{ $pages := $pages | first 50 }}
-      {{ range $pages }}
-      {{ if (not (and (eq $s $p.Site.Home) (eq .Params.toc_root true))) }}
-        {{ if .IsPage }}
-          {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
-          {{ $active := eq . $p }}
-          <a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-        {{ else }}
-          {{ template "section-tree-nav-section" (dict "page" $p "section" .) }}
+  {{ $s := .section }}
+  {{ $p := .page }}
+  {{ $shouldDelayActive := .shouldDelayActive }}
+  {{ $sidebarMenuTruncate := .sidebarMenuTruncate }}
+  {{ $treeRoot := cond (eq .ulNr 0) true false }}
+  {{ $ulNr := .ulNr }}
+  {{ $ulShow := .ulShow }}
+  {{ $active := and (not $shouldDelayActive) (eq $s $p) }}
+  {{ $activePath := and (not $shouldDelayActive) ($p.IsDescendant $s) }}
+  {{ $show := cond (or (lt $ulNr $ulShow) $activePath (and (not $shouldDelayActive) (eq $s.Parent $p.Parent)) (and (not $shouldDelayActive) (eq $s.Parent $p)) (not $p.Site.Params.ui.sidebar_menu_compact)) true false }}
+  {{ $mid := printf "m-%s" ($s.RelPermalink | anchorize) }}
+  {{ $pages_tmp := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true }}
+  {{ $pages := $pages_tmp | first $sidebarMenuTruncate }}
+  {{ $withChild := gt (len $pages) 0 }}
+  <li class="td-sidebar-nav__section-title td-sidebar-nav__section{{ if $withChild }} with-child{{ else }} without-child{{ end }}{{ if $activePath }} active-path{{ end }}{{ if not $show }} collapse{{ end }}" id="{{ $mid }}-li">
+    <span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}{{ if $treeRoot }} tree-root{{ end }}">
+      <a  href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}" id="{{ $mid }}">{{ $s.LinkTitle }}</a>
+    </span>
+    {{if $withChild }}
+      {{ $ulNr := add $ulNr 1 }}
+      <ul class="pr-md-3 ul-{{ $ulNr }}">
+        {{ range $pages }}
+          {{ if (not (and (eq $s $p.Site.Home) (eq .Params.toc_root true))) }}
+            {{ template "section-tree-nav-section" (dict "page" $p "section" . "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" $ulShow) }}
+          {{ end }}
         {{ end }}
-      {{ end }}
-      {{ end }}
-    </li>
-  </ul>
-</ul>
+      </ul>
+    {{ end }}
+  </li>
 {{ end }}
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index bf568e2100..e2d113ffc6 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,14 +1,22 @@
 {{/* The "active" toggle here may delay rendering, so we only cache this side bar menu for bigger sites. */}}
-{{ $shouldCache := ge (len .Site.Pages) 2000 }}
+{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 }}
+{{ $shouldCache := ge (len .Site.Pages) $sidebarCacheLimit }}
+{{ $sidebarCacheTypeRoot := cond (isset .Site.Params.ui "sidebar_cache_type_root") .Site.Params.ui.sidebar_cache_type_root false }}
 {{ if $shouldCache }}
-{{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
-<script>
- $(function() {
- $("#td-sidebar-menu #{{ $mid }}").toggleClass("active"); 
- $("#td-sidebar-menu").toggleClass("d-none"); 
-});
-</script>
-{{ partialCached "sidebar-tree.html" . .CurrentSection.RelPermalink }}
+  {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
+  <script>
+    $(function() {
+    $("#td-sidebar-menu a").removeClass("active");
+    $("#td-sidebar-menu #{{ $mid }}").addClass("active"); 
+    $("#td-sidebar-menu #{{ $mid }}-li span").addClass("td-sidebar-nav-active-item"); 
+    $("#td-sidebar-menu #{{ $mid }}").parents("li").addClass("active-path"); 
+    $("#td-sidebar-menu li.active-path").addClass("show"); 
+    $("#td-sidebar-menu #{{ $mid }}-li").siblings("li").addClass("show");  
+    $("#td-sidebar-menu #{{ $mid }}-li").children("ul").children("li").addClass("show");  
+    $("#td-sidebar-menu").toggleClass("d-none"); 
+    });
+  </script>
+  {{ partialCached "sidebar-tree.html" . .FirstSection.RelPermalink }}
 {{ else }}
-{{ partial "sidebar-tree.html" . }}
+  {{ partial "sidebar-tree.html" . }}
 {{ end }}
diff --git a/userguide/content/en/docs/Adding content/navigation.md b/userguide/content/en/docs/Adding content/navigation.md
index a63bdfd35c..a1aa559b67 100644
--- a/userguide/content/en/docs/Adding content/navigation.md	
+++ b/userguide/content/en/docs/Adding content/navigation.md	
@@ -64,7 +64,11 @@ description: >
 
 To hide a page or section from the menu, set `toc_hide: true` in front matter.
 
-By default, the section menu will show the current section fully expanded all the way down. This may make the left nav too long and difficult to scan for bigger sites. Try setting site param `ui.sidebar_menu_compact = true` in `config.toml`.
+By default, the section menu shows the current section fully expanded all the way down. This may make the left nav too long and difficult to scan for bigger sites. Try setting site param `ui.sidebar_menu_compact = true` in `config.toml`.
+
+With the compact menu (`.ui.sidebar_menu_compact = true`), only the current page's ancestors, siblings and direct descendants are shown. You can use the optional parameter `.ui.ul_show` to set a desired menu depth to always be visible. For example, with `.ui.ul_show = 1` the first menu level is always displayed.
+
+On large sites (default: > 2000 pages) the section menu is not generated for each page, but cached for the whole section. The HTML classes for marking the active menu item (and menu path) are then set using JS. You can adjust the limit for activating the cached section menu with the optional parameter `.ui.sidebar_cache_limit`.
 
 ## Breadcrumb navigation