diff --git a/src/docgen/templates/sidebar.html.jinja2 b/src/docgen/templates/sidebar.html.jinja2
new file mode 100644
index 0000000..34e0e4e
--- /dev/null
+++ b/src/docgen/templates/sidebar.html.jinja2
@@ -0,0 +1,31 @@
+{% macro slugify(text) %}
+{%- set result = text | lower | replace('[^a-z0-9]+', '-') | replace('-+', '-') | trim -%}
+{%- endmacro %}
+
+<div class="nav-search">
+    <input type="text" id="nav-search" placeholder="Search endpoints..." onkeyup="filterNav(this.value)">
+</div>
+
+<nav class="nav-menu">
+    {% for tag, tag_endpoints in grouped_endpoints.items() %}
+    <div class="nav-group">
+        <button class="nav-group-toggle" onclick="toggleNavGroup(this)">
+            <span class="nav-group-icon">▶</span>
+            <span class="nav-group-name">{{ tag }}</span>
+            <span class="nav-group-count">{{ tag_endpoints | length }}</span>
+        </button>
+        <ul class="nav-group-items">
+            {% for endpoint in tag_endpoints %}
+            <li class="nav-item">
+                <a href="#endpoint-{{ endpoint.path | lower | replace('[^a-z0-9]+', '-') | replace('-+', '-') | trim }}-{{ endpoint.method.value | lower }}" 
+                   class="nav-link"
+                   onclick="scrollToEndpoint(event, '{{ endpoint.path | lower | replace('[^a-z0-9]+', '-') | replace('-+', '-') | trim }}-{{ endpoint.method.value | lower }}')">
+                    <span class="nav-method nav-method-{{ endpoint.method.value | lower }}">{{ endpoint.method.value }}</span>
+                    <span class="nav-path">{{ endpoint.path }}</span>
+                </a>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+    {% endfor %}
+</nav>