diff --git a/layouts/partials/components/sidebar/item-link.html b/layouts/partials/components/sidebar/item-link.html
index ea7396e..6fd4345 100644
--- a/layouts/partials/components/sidebar/item-link.html
+++ b/layouts/partials/components/sidebar/item-link.html
@@ -15,4 +15,5 @@
       {{- partialCached "components/sidebar/collapsible-button" . }}
     {{- end }}
   {{ end -}}
+  {{- with .items }}{{- partialCached "components/sidebar/collapsible-button" site.Home }}{{ end -}}
 </a>
diff --git a/layouts/partials/components/sidebar/render-data.html b/layouts/partials/components/sidebar/render-data.html
new file mode 100644
index 0000000..bbbb196
--- /dev/null
+++ b/layouts/partials/components/sidebar/render-data.html
@@ -0,0 +1,15 @@
+{{- $page := .page -}}
+{{- $pageLink :=  $page.RelPermalink -}}
+
+{{- range .data -}}
+  {{- $active := or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link) -}}
+  {{- $containsPage := hasPrefix $pageLink .link -}}
+  {{- $shouldOpen := or (.open) $containsPage $active | default true -}}
+
+  <li class="{{ if $shouldOpen }}open{{ end }}">
+    {{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}}
+    {{- if .items -}}
+      {{- partial "components/sidebar/render-items" (dict "items" .items "link" $pageLink) -}}
+    {{- end -}}
+  </li>
+{{ end }}
diff --git a/layouts/partials/components/sidebar/render-items.html b/layouts/partials/components/sidebar/render-items.html
new file mode 100644
index 0000000..d177185
--- /dev/null
+++ b/layouts/partials/components/sidebar/render-items.html
@@ -0,0 +1,20 @@
+{{- $items := .items -}}
+{{- $pageLink := .link -}}
+{{ $shouldOpen := true }}
+
+
+<div class="ltr:hx-pr-0 hx-overflow-hidden">
+  <ul
+    class='hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800'
+  >
+    {{- range $items }}
+      {{- $active := or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link) -}}
+      <li class="hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
+        {{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}}
+        {{- if .items -}}
+          {{- partial "components/sidebar/render-items" (dict "items" .items "link" .link) -}}
+        {{- end -}}
+      </li>
+    {{- end -}}
+  </ul>
+</div>
diff --git a/layouts/partials/sidebar-ng.html b/layouts/partials/sidebar-ng.html
index 8eeed1a..e9d8689 100644
--- a/layouts/partials/sidebar-ng.html
+++ b/layouts/partials/sidebar-ng.html
@@ -25,7 +25,7 @@
     <ul class="hx-flex hx-flex-col hx-gap-1 max-md:hx-hidden">
       {{ with $data }}
         {{ warnf "The data file for the sidebar is still unstable. Please use caution when upgrading." }}
-        <pre>{{ . | jsonify (dict "indent" "  ") }}</pre>
+        {{ partial "components/sidebar/render-data" (dict "data" . "page" $context) }}
       {{ end }}
       {{ partialCached "components/sidebar/footer" $context site.Home }}
     </ul>