diff --git a/docs/_includes/sidebar-group.njk b/docs/_includes/sidebar-group.njk
new file mode 100644
index 000000000..9d4db901e
--- /dev/null
+++ b/docs/_includes/sidebar-group.njk
@@ -0,0 +1,18 @@
+
+
+
+ {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+ {% if groupUrl | getCollectionItemFromUrl %}
+ {{ title or (tag | capitalize) }}
+
+
+ {% else %}
+ {{ title or (tag | capitalize) }}
+ {% endif %}
+
+
+ {% for page in collections[tag] | sort %}
+ {% include 'sidebar-link.njk' %}
+ {% endfor %}
+
+
diff --git a/docs/_includes/sidebar-link.njk b/docs/_includes/sidebar-link.njk
new file mode 100644
index 000000000..b22d38d94
--- /dev/null
+++ b/docs/_includes/sidebar-link.njk
@@ -0,0 +1,16 @@
+{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.unlisted -%}
+
+ {{ page.data.title }}
+ {% if page.data.status == 'experimental' %}{% endif %}
+ {% if page.data.isPro %}PRO{% endif %}
+
+ {% set children = page.data.children %}
+ {% if children.length > 0 %}
+
+ {% for page in children %}
+ {% include 'sidebar-link.njk' %}
+ {% endfor %}
+
+ {% endif %}
+
+{%- endif %}
diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk
index 5195e61e6..b5e5d570e 100644
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -19,121 +19,13 @@
Changelog
-{# Components #}
-
-
-
-
- {% for component in collections.components | sort %}
- {% if not component.data.parent and not (isAlpha and component.data.noAlpha) and not component.data.unlisted %}
- -
- {{ component.data.title }}
-
- {% if components[component.fileSlug].status == 'experimental' %}{% endif %}
- {% if component.data.isPro %}PRO{% endif %}
-
- {% for child in collections.components | sort %}
- {% if child.data.parent == component.fileSlug and not (isAlpha and child.data.noAlpha) %}
- -
- {{ child.data.title }}
-
- {% endif %}
- {% endfor %}
-
-
- {% endif %}
- {% endfor %}
-
-
-
-
-
-
- {% for page in collections.native | sort %}
- {% if page.fileSlug != 'native' and not page.unlisted %}
- -
- {{ page.data.title }}
-
- {% endif %}
- {% endfor %}
-
-
-
-
-
-
- {% for page in collections.utilities | sort %}
- {% if page.fileSlug != 'utilities' and not page.unlisted %}
- -
- {{ page.data.title }}
-
- {% endif %}
- {% endfor %}
-
-
-
-{# Layout #}
-
-
- {% for page in collections.layout | sort %}
- {% if page.fileSlug != 'layout' and not page.unlisted %}
- -
- {{ page.data.title }}
-
- {% endif %}
- {% endfor %}
-
-
-{# Patterns #}
-{% if not isAlpha %}
-Patterns
-
-{% endif %}
-
-{# Theming #}
-
-
-{% for page in collections.theming | sort %}
- {% if page.fileSlug != 'theming' and not page.unlisted %}
- -
- {{ page.data.title }}
-
- {% endif %}
+{% for tag, title in {
+ 'components': 'Components',
+ 'native': 'Native Styles',
+ 'utilities': 'Style Utilities',
+ 'layout': 'Layout',
+ 'patterns': 'Patterns',
+ 'theming': 'Theming'
+} %}
+ {% include 'sidebar-group.njk' %}
{% endfor %}
-
diff --git a/docs/docs/docs.11tydata.js b/docs/docs/docs.11tydata.js
new file mode 100644
index 000000000..7ed1011e1
--- /dev/null
+++ b/docs/docs/docs.11tydata.js
@@ -0,0 +1,10 @@
+export default {
+ eleventyComputed: {
+ children(data) {
+ let mainTag = data.tags?.[0];
+ let collection = data.collections[mainTag] ?? [];
+
+ return collection.filter(item => item.data.parent === data.page.fileSlug);
+ },
+ },
+};