diff --git a/src/archive/archive.11tydata.json b/src/archive/archive.11tydata.json
index ca5a0dad..67413777 100644
--- a/src/archive/archive.11tydata.json
+++ b/src/archive/archive.11tydata.json
@@ -1,5 +1,10 @@
 {
     "tags": "archive",
     "layout": "main/content",
-    "permalink": "/{{ page.fileSlug }}/"
+    "permalink": "/{{ page.fileSlug }}/",
+    "eleventyComputed":{
+        "eleventyNavigation":{
+            "key": "{{ title }}"
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/articles/articles.11tydata.json b/src/articles/articles.11tydata.json
index 5a332057..35908a43 100644
--- a/src/articles/articles.11tydata.json
+++ b/src/articles/articles.11tydata.json
@@ -2,6 +2,10 @@
     "tags": ["articles", "contents", "feed items"],
     "layout": "main/article",
     "eleventyComputed": {
-        "title": "{{ articleTitle }} | Articles"
+        "title": "{{ articleTitle }} | Articles",
+        "eleventyNavigation": {
+            "key": "{{ articleTitle }}",
+            "parent": "Articles"
+        }
     }
 }
\ No newline at end of file
diff --git a/src/blog/posts.njk b/src/blog/posts.njk
index bff2c74f..848ca9d0 100644
--- a/src/blog/posts.njk
+++ b/src/blog/posts.njk
@@ -4,6 +4,9 @@ layout: main/content
 tags: blog pages
 eleventyComputed:
     desc: Archive of blog posts on {{ sitemeta.siteName | safe }}
+eleventyNavigation:
+    key: Blog Archive
+    parent: Blog
 ---
 
 <ul class="blog__postlist">
diff --git a/src/blog/posts/posts.11tydata.json b/src/blog/posts/posts.11tydata.json
index 66ecb2fb..6eb6d548 100644
--- a/src/blog/posts/posts.11tydata.json
+++ b/src/blog/posts/posts.11tydata.json
@@ -2,6 +2,10 @@
     "layout": "main/blogpost",
     "tags": ["posts", "contents", "feed items"],
     "eleventyComputed": {
-        "title": "{{ articleTitle }} | Blog"
+        "title": "{{ articleTitle }} | Blog",
+        "eleventyNavigation": {
+            "key": "{{ articleTitle }}",
+            "parent": "Blog Archive"
+        }
     }
 }
\ No newline at end of file
diff --git a/src/changelogs/changelogs.njk b/src/changelogs/changelogs.njk
index 6a52856c..10ac863b 100644
--- a/src/changelogs/changelogs.njk
+++ b/src/changelogs/changelogs.njk
@@ -11,6 +11,8 @@ pagination:
     alias: changelogs
     reverse: true
 permalink: "/{{ page.fileSlug }}{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber + 1 }}{% endif %}/"
+eleventyNavigation:
+    key: Changelogs
 ---
 
 <article>
diff --git a/src/changelogs/pages/2022.njk b/src/changelogs/pages/2022.njk
index bcf4f624..5bf10793 100644
--- a/src/changelogs/pages/2022.njk
+++ b/src/changelogs/pages/2022.njk
@@ -5,7 +5,8 @@ desc: Changelog of my website during the year of 2022.
 changelogNav: 2022
 metadata:
     type: article
-date: 2022-02-02
+eleventyNavigation:
+    order: 2
 ---
 
 {% set changelogList = collections["changelog 2022"] %}
diff --git a/src/changelogs/pages/2023.njk b/src/changelogs/pages/2023.njk
index ce1e5ffd..f19bc368 100644
--- a/src/changelogs/pages/2023.njk
+++ b/src/changelogs/pages/2023.njk
@@ -5,7 +5,8 @@ desc: Changelog of my website during the year of 2023.
 changelogNav: 2023
 metadata:
     type: article
-date: 2022-02-03
+eleventyNavigation:
+    order: 3
 ---
 
 {% set changelogList = collections["changelog 2023"] %}
diff --git a/src/changelogs/pages/2024.njk b/src/changelogs/pages/2024.njk
index c26fea6f..17d0b8dc 100644
--- a/src/changelogs/pages/2024.njk
+++ b/src/changelogs/pages/2024.njk
@@ -5,7 +5,8 @@ desc: Changelog of my website during the year of 2024.
 changelogNav: 2024
 metadata:
     type: article
-date: 2022-02-04
+eleventyNavigation:
+    order: 4
 ---
 
 {% set changelogList = collections["changelog 2024"] %}
diff --git a/src/changelogs/pages/layouts.njk b/src/changelogs/pages/layouts.njk
index 782eca31..c729afea 100644
--- a/src/changelogs/pages/layouts.njk
+++ b/src/changelogs/pages/layouts.njk
@@ -5,7 +5,8 @@ desc: An archive for the page layout designs mt website has used.
 changelogNav: Website Layouts
 metadata:
     type: article
-date: 2022-02-01
+eleventyNavigation:
+    order: 1
 ---
 
 {%- from "macros/components.njk" import siteLayoutArchive -%}
diff --git a/src/changelogs/pages/pages.11tydata.json b/src/changelogs/pages/pages.11tydata.json
index 413d2026..1e901893 100644
--- a/src/changelogs/pages/pages.11tydata.json
+++ b/src/changelogs/pages/pages.11tydata.json
@@ -1,5 +1,11 @@
 {
     "tags": "changelog pages",
     "layout": "main/changelogs",
-    "permalink": "/changelogs/{{ page.fileSlug }}/"
+    "permalink": "/changelogs/{{ page.fileSlug }}/",
+    "eleventyComputed": {
+        "eleventyNavigation": {
+            "key": "{{ changelogNav }}",
+            "parent": "Changelogs"
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/index.njk b/src/index.njk
index b03f4b3e..72dc7feb 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -7,6 +7,8 @@ metadata:
     title: Home
 date: 2022-01-01
 isContentDivided: true
+eleventyNavigation:
+    key: Home
 ---
 
 <section class="content__section">
diff --git a/src/pages/about.njk b/src/pages/about.njk
index a66795cd..79e20995 100644
--- a/src/pages/about.njk
+++ b/src/pages/about.njk
@@ -6,6 +6,8 @@ metadata:
     type: article
 date: 2022-01-02
 isContentDivided: true
+eleventyNavigation:
+    key: About
 ---
 
 <section class="content__section">
diff --git a/src/pages/articles.md b/src/pages/articles.md
index ffeea6df..6c89e62a 100644
--- a/src/pages/articles.md
+++ b/src/pages/articles.md
@@ -7,6 +7,8 @@ metadata:
 date: 2022-01-05
 templateEngineOverride: njk, md
 toc: true
+eleventyNavigation:
+    key: Articles
 ---
 
 ## My Articles
diff --git a/src/pages/blog.njk b/src/pages/blog.njk
index 4a057981..90530754 100644
--- a/src/pages/blog.njk
+++ b/src/pages/blog.njk
@@ -12,6 +12,8 @@ pagination:
     alias: postList
     reverse: true
 permalink: "/{{ page.fileSlug }}{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber + 1 }}{% endif %}/"
+eleventyNavigation:
+    key: Blog
 ---
 
 <ul class="blog__posts">
diff --git a/src/pages/links.njk b/src/pages/links.njk
index f95b8d0b..6ecaa555 100644
--- a/src/pages/links.njk
+++ b/src/pages/links.njk
@@ -6,6 +6,8 @@ metadata:
     type: article
 date: 2022-01-08
 isContentDivided: true
+eleventyNavigation:
+    key: Links
 ---
 
 <section class="content__section">
diff --git a/src/pages/now.md b/src/pages/now.md
index bb1dbfad..b38e8564 100644
--- a/src/pages/now.md
+++ b/src/pages/now.md
@@ -6,6 +6,8 @@ metadata:
     type: article
 date: 2022-01-03
 updated: 2024-04-18
+eleventyNavigation:
+    key: Now
 ---
 
 *This page was last updated on {{ updated | niceDate }}.*
diff --git a/src/pages/projects.md b/src/pages/projects.md
index 334ddbb0..1b305002 100644
--- a/src/pages/projects.md
+++ b/src/pages/projects.md
@@ -6,6 +6,8 @@ metadata:
     type: article
 date: 2022-01-06
 toc: true
+eleventyNavigation:
+    key: Projects
 ---
 
 ## My Drawings
diff --git a/src/pages/shrines.md b/src/pages/shrines.md
index 38acb5e8..85c4e108 100644
--- a/src/pages/shrines.md
+++ b/src/pages/shrines.md
@@ -5,6 +5,8 @@ desc: Index of my personal e-shrines.
 metadata:
     type: article
 date: 2022-01-07
+eleventyNavigation:
+    key: Shrines
 ---
 
 Internet shrines are website pages dedicated to specific topics or interests. Here is a list of shrines I have made for my own website.
diff --git a/src/pages/sitemap.njk b/src/pages/sitemap.njk
index b9e3af23..1e0909ec 100644
--- a/src/pages/sitemap.njk
+++ b/src/pages/sitemap.njk
@@ -8,75 +8,20 @@ eleventyComputed:
 
 <p>This page lists the links to the pages on my website for easier navigation.</p>
 
+{% set navPages = collections.all | eleventyNavigation %}
+{% macro renderNavListItem(entry) -%}
+    <li{% if entry.url == page.url %} class="my-active-class"{% endif %}>
+        <a href="{{ entry.url }}">{{ entry.title }}</a>
+    {%- if entry.children.length -%}
+        <ul>
+            {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
+        </ul>
+    {%- endif -%}
+    </li>
+{%- endmacro %}
+
 <ul role="list" class="sitemap">
-    {% for page in collections.pages %}
-        <li>
-            <a href="{{ page.url }}">{{ page.data.title or page.data.metadata.title }}</a>
-        </li>
-        {% if page.data.title === "Blog" %}
-            <ul>
-                {% for page in collections["blog pages"] %}
-                    {% if page.data.title !== "Blog" %}
-                        <li>
-                            <a href="{{ page.url }}">{{ page.data.title or page.data.metadata.title }}</a>
-                        </li>
-                    {% endif %}
-                {%- endfor %}
-            </ul>
-        {% endif %}
-
-        {% if page.data.title === "Articles" %}
-            <ul>
-                {% for page in collections["articles"] %}
-                    <li>
-                        <a href="{{ page.url }}">{{ page.data.articleTitle }}</a>
-                    </li>
-                {%- endfor %}
-            </ul>
-        {% endif %}
-
-        {% if page.data.title === "Projects" %}
-            <ul>
-                {% for page in collections["project pages"] %}
-                    <li>
-                        <a href="{{ page.url }}">{{ page.data.title }}</a>
-                    </li>
-                {%- endfor %}
-            </ul>
-        {% endif %}
-
-        {% if page.data.title === "Shrines" %}
-            <ul>
-                {% for page in collections["shrine home"] %}
-                    <li>
-                        <a href="{{ page.url }}">{{ page.data.title }}</a>
-                    </li>
-                    <ul>
-                        {% if "asummersend" in page.url %}
-                            {% for page in collections["a summers end shrine page"] %}
-                                <li>
-                                    <a href="{{ page.url }}">{{ page.data.title }}</a>
-                                </li>
-                            {% endfor %}
-                        {% endif %}
-                    </ul>
-                {%- endfor %}
-            </ul>
-        {% endif %}
-    {%- endfor %}
-
-    <li><a href="/changelogs/">Changelogs</a></li>
-    <ul>
-        {% for page in collections["changelog pages"] %}
-            <li>
-                <a href="{{ page.url }}">{{ page.data.changelogNav }}</a>
-            </li>
-        {%- endfor %}
-    </ul>
-
-    {% for archive in collections.archive %}
-        <li><a href="{{ archive.url }}">{{ archive.data.title }}</a></li>
-    {% endfor %}
+    {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
 </ul>
 
 <style>
diff --git a/src/projects/projects.11tydata.json b/src/projects/projects.11tydata.json
index 6ac53410..fbfee991 100644
--- a/src/projects/projects.11tydata.json
+++ b/src/projects/projects.11tydata.json
@@ -1,3 +1,9 @@
 {
-    "tags": "project pages"
+    "tags": "project pages",
+    "eleventyComputed": {
+        "eleventyNavigation": {
+            "key": "{{ title }}",
+            "parent": "Projects"
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/shrines/asummersend.njk b/src/shrines/asummersend.njk
index e3039177..b9f5484d 100644
--- a/src/shrines/asummersend.njk
+++ b/src/shrines/asummersend.njk
@@ -4,6 +4,9 @@ tags: shrine home
 title: A Summer's End — Hong Kong 1986 Shrine
 desc: My shrine for A Summer's End — Hong Kong 1986
 isContentDivided: true
+eleventyNavigation:
+    key: A Summer's End — Hong Kong 1986 Shrine
+    parent: Shrines
 ---
 
 <section class="content__section">
diff --git a/src/shrines/asummersend/gallery.md b/src/shrines/asummersend/gallery.md
index 9f6f2e3b..438f72db 100644
--- a/src/shrines/asummersend/gallery.md
+++ b/src/shrines/asummersend/gallery.md
@@ -4,6 +4,10 @@ title: Gallery
 pageTitle: A Summer's End — Hong Kong 1986 Gallery
 desc: My gallery for A Summer's End — Hong Kong 1986.
 tags: a summers end shrine page
+eleventyNavigation:
+    key: Gallery
+    parent: A Summer's End — Hong Kong 1986 Shrine
+    order: 3
 ---
 
 A Summer’s End — Hong Kong 1986 was lovingly crafted by its developer Oracle and Bone with gorgeous art, so i want to make a page dedicated to my appreciation for the visual novel’s art.
diff --git a/src/shrines/asummersend/playlists.md b/src/shrines/asummersend/playlists.md
index 4c16b3bc..5276d785 100644
--- a/src/shrines/asummersend/playlists.md
+++ b/src/shrines/asummersend/playlists.md
@@ -5,6 +5,10 @@ pageTitle: A Summer's End — Hong Kong 1986 Playlists
 desc: List of A Summer's End — Hong Kong 1986 playlists.
 tags: a summers end shrine page
 toc: true
+eleventyNavigation:
+    key: Playlists
+    parent: A Summer's End — Hong Kong 1986 Shrine
+    order: 1
 ---
 
 A Summer’s End — Hong Kong 1986 is a gold mine of music. Not only that the visual novel has a great soundtrack (its [official soundtrack](https://www.asummersend.com/original-soundtrack) was released on August 21, 2020), but the developer Oracle and Bone has also compiled playlists related to the game.
diff --git a/src/shrines/asummersend/trivia.md b/src/shrines/asummersend/trivia.md
index 7d09c3c9..046dc573 100644
--- a/src/shrines/asummersend/trivia.md
+++ b/src/shrines/asummersend/trivia.md
@@ -5,6 +5,10 @@ pageTitle: A Summer's End — Hong Kong 1986 Trivia
 desc: A collection of trivia about A Summer's End — Hong Kong 1986.
 tags: a summers end shrine page
 toc: true
+eleventyNavigation:
+    key: Trivia
+    parent: A Summer's End — Hong Kong 1986 Shrine
+    order: 2
 ---
 
 Here is a collection of trivia about the characters from A Summer’s End provided by the developer Oracle and Bone on their social media pages, especially [Tumblr](https://oracleandbone.tumblr.com/).