diff --git a/demo/backend/_includes/macros/tabbar-top/index.xml.njk b/demo/backend/_includes/macros/tabbar-top/index.xml.njk
index 2d328d6dd..93c5103be 100644
--- a/demo/backend/_includes/macros/tabbar-top/index.xml.njk
+++ b/demo/backend/_includes/macros/tabbar-top/index.xml.njk
@@ -1,17 +1,13 @@
 {% macro tabbar_top(tabs) %}
-  <select-single id="tab-bar" name="tab-bar" style="tabbar-top-select">
+  <view style="tabbar-top-container">
     {% for tab in tabs -%}
-      <option
-        value="{{ tab.id }}"
-        style="tabbar-top-item"
-        {% if tab.selected %}
-          selected="true"
-        {% endif %}
+      <view
+        href-style="tabbar-top-item{% if tab.selected %} tabbar-top-item-selected{% endif %}"
+        action="navigate"
+        href="#{{ tab.id }}"
       >
-        <behavior trigger="deselect" action="hide" target="{{ tab.id }}" />
-        <behavior trigger="select" action="show" target="{{ tab.id }}" />
         <text style="tabbar-top-label">{{ tab.label }}</text>
-      </option>
+      </view>
     {%- endfor %}
-  </select-single>
+  </view>
 {% endmacro %}
diff --git a/demo/backend/_includes/macros/tabbar-top/styles.xml.njk b/demo/backend/_includes/macros/tabbar-top/styles.xml.njk
index 4dde14901..b959cf68e 100644
--- a/demo/backend/_includes/macros/tabbar-top/styles.xml.njk
+++ b/demo/backend/_includes/macros/tabbar-top/styles.xml.njk
@@ -1,5 +1,5 @@
 <style
-  id="tabbar-top-select"
+  id="tabbar-top-container"
   backgroundColor="#eee"
   borderRadius="12"
   flexDirection="row"
@@ -17,9 +17,9 @@
   flex="1"
   padding="8"
   justifyContent="center"
->
-  <modifier selected="true">
-  <style
+/>
+<style
+  id="tabbar-top-item-selected"
   backgroundColor="white"
   elevation="2"
   shadowColor="black"
@@ -27,9 +27,12 @@
   shadowOffsetY="2"
   shadowOpacity="0.1"
   shadowRadius="2"
-  />
-  </modifier>
-</style>
+/>
+<style
+  id="tabbar-top-item-link"
+  alignItems="stretch"
+  flex="1"
+/>
 <style
   id="tabbar-top-label"
   fontSize="16"
diff --git a/demo/backend/advanced/case-studies.xml.njk b/demo/backend/advanced/case-studies.xml.njk
new file mode 100644
index 000000000..6580cd90c
--- /dev/null
+++ b/demo/backend/advanced/case-studies.xml.njk
@@ -0,0 +1,17 @@
+---
+permalink: "/advanced/case-studies.xml"
+hv_title: "Advanced"
+hv_tab_id: "advanced"
+hv_button_behavior: "none"
+---
+{% extends 'templates/tab-route.xml.njk' %}
+
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+
+{% block tab_route_content %}
+  {{ tabbar_top([
+  {id: "case-studies-route", label: "Case Studies", selected: true},
+  {id: "community-route", label: "Community"}
+  ]) }}
+  {% include './case-studies/content.xml.njk' %}
+{% endblock %}
diff --git a/demo/backend/advanced/community.xml.njk b/demo/backend/advanced/community.xml.njk
new file mode 100644
index 000000000..5fd2dbdc5
--- /dev/null
+++ b/demo/backend/advanced/community.xml.njk
@@ -0,0 +1,17 @@
+---
+permalink: "/advanced/community.xml"
+hv_title: "Advanced"
+hv_tab_id: "advanced"
+hv_button_behavior: "none"
+---
+{% extends 'templates/tab-route.xml.njk' %}
+
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+
+{% block tab_route_content %}
+  {{ tabbar_top([
+  {id: "case-studies-route", label: "Case Studies"},
+  {id: "community-route", label: "Community", selected: true}
+  ]) }}
+  {% include './community/content.xml.njk' %}
+{% endblock %}
diff --git a/demo/backend/advanced/community/elements/top-tabbar/index.xml.njk b/demo/backend/advanced/community/elements/top-tabbar/index.xml.njk
new file mode 100644
index 000000000..9d5a3f139
--- /dev/null
+++ b/demo/backend/advanced/community/elements/top-tabbar/index.xml.njk
@@ -0,0 +1,18 @@
+---
+permalink: "/advanced/community/elements/top-tabbar/index.xml"
+tags: "Advanced/Community/Elements"
+hv_title: "Top Tab Bar"
+hv_button_behavior: "back"
+---
+{# Example tab navigator inside a stack navigator #}
+<doc xmlns="https://hyperview.org/hyperview">
+  <navigator id="custom-stack" type="stack">
+    <nav-route id="custom-top-tabs-route">
+      <navigator id="custom-top-tabs-navigator" type="tab">
+        <nav-route id="custom-top-tabs-tab-1" href="/hyperview/public/advanced/community/elements/top-tabbar/tab-1.xml"/>
+        <nav-route id="custom-top-tabs-tab-2" href="/hyperview/public/advanced/community/elements/top-tabbar/tab-2.xml" selected="true"/>
+        <nav-route id="custom-top-tabs-tab-3" href="/hyperview/public/advanced/community/elements/top-tabbar/tab-3.xml"/>
+      </navigator>
+    </nav-route>
+  </navigator>
+</doc>
diff --git a/demo/backend/advanced/community/elements/top-tabbar/tab-1.xml.njk b/demo/backend/advanced/community/elements/top-tabbar/tab-1.xml.njk
new file mode 100644
index 000000000..f8a48e1bc
--- /dev/null
+++ b/demo/backend/advanced/community/elements/top-tabbar/tab-1.xml.njk
@@ -0,0 +1,19 @@
+---
+permalink: "/advanced/community/elements/top-tabbar/tab-1.xml"
+hv_title: "Tab Navigator - Tab 1"
+hv_button_behavior: "back"
+---
+{% from 'macros/description/index.xml.njk' import description %}
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+{% extends 'templates/base.xml.njk' %}
+
+{% block container %}
+  {{ tabbar_top([
+  {id: "custom-top-tabs-tab-1", label: "Tab 1", selected: true},
+  {id: "custom-top-tabs-tab-2", label: "Tab 2"},
+  {id: "custom-top-tabs-tab-3", label: "Tab 3"}
+  ]) }}
+  <view scroll="true">
+    {{ description('This is the content for tab 1.') }}
+  </view>
+{% endblock %}
diff --git a/demo/backend/advanced/community/elements/top-tabbar/tab-2.xml.njk b/demo/backend/advanced/community/elements/top-tabbar/tab-2.xml.njk
new file mode 100644
index 000000000..80f6cad73
--- /dev/null
+++ b/demo/backend/advanced/community/elements/top-tabbar/tab-2.xml.njk
@@ -0,0 +1,19 @@
+---
+permalink: "/advanced/community/elements/top-tabbar/tab-2.xml"
+hv_title: "Tab Navigator - Tab 2"
+hv_button_behavior: "back"
+---
+{% from 'macros/description/index.xml.njk' import description %}
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+{% extends 'templates/base.xml.njk' %}
+
+{% block container %}
+  {{ tabbar_top([
+  {id: "custom-top-tabs-tab-1", label: "Tab 1"},
+  {id: "custom-top-tabs-tab-2", label: "Tab 2", selected: true},
+  {id: "custom-top-tabs-tab-3", label: "Tab 3"}
+  ]) }}
+  <view scroll="true">
+    {{ description('This is the content for tab 2.') }}
+  </view>
+{% endblock %}
diff --git a/demo/backend/advanced/community/elements/top-tabbar/tab-3.xml.njk b/demo/backend/advanced/community/elements/top-tabbar/tab-3.xml.njk
new file mode 100644
index 000000000..0aba401fc
--- /dev/null
+++ b/demo/backend/advanced/community/elements/top-tabbar/tab-3.xml.njk
@@ -0,0 +1,19 @@
+---
+permalink: "/advanced/community/elements/top-tabbar/tab-3.xml"
+hv_title: "Tab Navigator - Tab 3"
+hv_button_behavior: "back"
+---
+{% from 'macros/description/index.xml.njk' import description %}
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+{% extends 'templates/base.xml.njk' %}
+
+{% block container %}
+  {{ tabbar_top([
+  {id: "custom-top-tabs-tab-1", label: "Tab 1"},
+  {id: "custom-top-tabs-tab-2", label: "Tab 2"},
+  {id: "custom-top-tabs-tab-3", label: "Tab 3", selected: true}
+  ]) }}
+  <view scroll="true">
+    {{ description('This is the content for tab 3.') }}
+  </view>
+{% endblock %}
diff --git a/demo/backend/advanced/index.xml.njk b/demo/backend/advanced/index.xml.njk
index 1f14b150a..3e01b8ffe 100644
--- a/demo/backend/advanced/index.xml.njk
+++ b/demo/backend/advanced/index.xml.njk
@@ -2,22 +2,20 @@
 permalink: "/advanced/index.xml"
 hv_title: "Advanced"
 hv_tab_id: "advanced"
-hv_button_behavior: "none"
 ---
-{% extends 'templates/tab-route.xml.njk' %}
+{% extends 'templates/root.xml.njk' %}
 
-{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
-{% from 'macros/tabbar-top-tab/index.xml.njk' import tabbar_top_tab %}
-
-{% block tab_route_content %}
-  {{ tabbar_top([
-  {id: "tab-case-studies", label: "Case Studies", selected: true},
-  {id: "tab-community", label: "Community"}
-  ]) }}
-  {% call tabbar_top_tab("tab-case-studies", true) -%}
-    {% include './case-studies/content.xml.njk' %}
-  {%- endcall -%}
-  {% call tabbar_top_tab("tab-community") -%}
-    {% include './community/content.xml.njk' %}
-  {%- endcall -%}
+{% block root %}
+  <doc xmlns="https://hyperview.org/hyperview">
+    <navigator id="advanced-nested-tabs" type="tab">
+      <nav-route
+        id="case-studies-route"
+        href="/hyperview/public/advanced/case-studies.xml"
+      />
+      <nav-route
+        id="community-route"
+        href="/hyperview/public/advanced/community.xml"
+      />
+    </navigator>
+  </doc>
 {% endblock %}
diff --git a/demo/backend/behaviors/advanced.xml.njk b/demo/backend/behaviors/advanced.xml.njk
new file mode 100644
index 000000000..9aebe2241
--- /dev/null
+++ b/demo/backend/behaviors/advanced.xml.njk
@@ -0,0 +1,17 @@
+---
+permalink: "/behaviors/advanced.xml"
+hv_title: "Behaviors"
+hv_tab_id: "behaviors"
+hv_button_behavior: "none"
+---
+{% extends 'templates/tab-route.xml.njk' %}
+
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+
+{% block tab_route_content %}
+  {{ tabbar_top([
+  {id: "basic-route", label: "Basic"},
+  {id: "advanced-behaviors-route", label: "Advanced", selected: true}
+  ]) }}
+  {% include './advanced/content.xml.njk' %}
+{% endblock %}
diff --git a/demo/backend/behaviors/basic.xml.njk b/demo/backend/behaviors/basic.xml.njk
new file mode 100644
index 000000000..ab3cbac6b
--- /dev/null
+++ b/demo/backend/behaviors/basic.xml.njk
@@ -0,0 +1,17 @@
+---
+permalink: "/behaviors/basic.xml"
+hv_title: "Behaviors"
+hv_tab_id: "behaviors"
+hv_button_behavior: "none"
+---
+{% extends 'templates/tab-route.xml.njk' %}
+
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+
+{% block tab_route_content %}
+  {{ tabbar_top([
+  {id: "basic-route", label: "Basic", selected: true},
+  {id: "advanced-behaviors-route", label: "Advanced"}
+  ]) }}
+  {% include './basic/content.xml.njk' %}
+{% endblock %}
diff --git a/demo/backend/behaviors/content.xml.njk b/demo/backend/behaviors/content.xml.njk
deleted file mode 100644
index c2c06350a..000000000
--- a/demo/backend/behaviors/content.xml.njk
+++ /dev/null
@@ -1,17 +0,0 @@
-{% extends 'templates/tab-route.xml.njk' %}
-
-{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
-{% from 'macros/tabbar-top-tab/index.xml.njk' import tabbar_top_tab %}
-
-{% block tab_route_content %}
-  {{ tabbar_top([
-  {id: "tab-basic", label: "Basic", selected: true},
-  {id: "tab-advanced", label: "Advanced"}
-  ]) }}
-  {% call tabbar_top_tab("tab-basic", true) -%}
-    {% include './basic/content.xml.njk' %}
-  {%- endcall -%}
-  {% call tabbar_top_tab("tab-advanced") -%}
-    {% include './advanced/content.xml.njk' %}
-  {%- endcall -%}
-{% endblock %}
diff --git a/demo/backend/behaviors/index.xml.njk b/demo/backend/behaviors/index.xml.njk
index a13b2f194..a6166c9ce 100644
--- a/demo/backend/behaviors/index.xml.njk
+++ b/demo/backend/behaviors/index.xml.njk
@@ -2,6 +2,20 @@
 permalink: "/behaviors/index.xml"
 hv_title: "Behaviors"
 hv_tab_id: "behaviors"
-hv_button_behavior: "none"
 ---
-{% include './content.xml.njk' %}
+{% extends 'templates/root.xml.njk' %}
+
+{% block root %}
+  <doc xmlns="https://hyperview.org/hyperview">
+    <navigator id="behaviors-nested-tabs" type="tab">
+      <nav-route
+        id="basic-route"
+        href="/hyperview/public/behaviors/basic.xml"
+      />
+      <nav-route
+        id="advanced-behaviors-route"
+        href="/hyperview/public/behaviors/advanced.xml"
+      />
+    </navigator>
+  </doc>
+{% endblock %}
diff --git a/demo/backend/navigation/behaviors.xml.njk b/demo/backend/navigation/behaviors.xml.njk
new file mode 100644
index 000000000..bc6f2f625
--- /dev/null
+++ b/demo/backend/navigation/behaviors.xml.njk
@@ -0,0 +1,17 @@
+---
+permalink: "/navigation/behaviors.xml"
+hv_title: "Navigation"
+hv_tab_id: "navigation"
+hv_button_behavior: "none"
+---
+{% extends 'templates/tab-route.xml.njk' %}
+
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+
+{% block tab_route_content %}
+  {{ tabbar_top([
+  {id: "navigation-behaviors-route", label: "Behaviors", selected: true},
+  {id: "navigator-route", label: "Navigator"}
+  ]) }}
+  {% include './behaviors/content.xml.njk' %}
+{% endblock %}
diff --git a/demo/backend/navigation/index.xml.njk b/demo/backend/navigation/index.xml.njk
index 03359f3bd..9e56fa026 100644
--- a/demo/backend/navigation/index.xml.njk
+++ b/demo/backend/navigation/index.xml.njk
@@ -2,22 +2,20 @@
 permalink: "/navigation/index.xml"
 hv_title: "Navigation"
 hv_tab_id: "navigation"
-hv_button_behavior: "none"
 ---
-{% extends 'templates/tab-route.xml.njk' %}
+{% extends 'templates/root.xml.njk' %}
 
-{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
-{% from 'macros/tabbar-top-tab/index.xml.njk' import tabbar_top_tab %}
-
-{% block tab_route_content %}
-  {{ tabbar_top([
-  {id: "tab-behaviors", label: "Behaviors", selected: true},
-  {id: "tab-navigator", label: "Navigator"}
-  ]) }}
-  {% call tabbar_top_tab("tab-behaviors", true) -%}
-    {% include './behaviors/content.xml.njk' %}
-  {%- endcall -%}
-  {% call tabbar_top_tab("tab-navigator") -%}
-    {% include './navigator/content.xml.njk' %}
-  {%- endcall -%}
+{% block root %}
+  <doc xmlns="https://hyperview.org/hyperview">
+    <navigator id="navigation-nested-tabs" type="tab">
+      <nav-route
+        id="navigation-behaviors-route"
+        href="/hyperview/public/navigation/behaviors.xml"
+      />
+      <nav-route
+        id="navigator-route"
+        href="/hyperview/public/navigation/navigator.xml"
+      />
+    </navigator>
+  </doc>
 {% endblock %}
diff --git a/demo/backend/navigation/navigator.xml.njk b/demo/backend/navigation/navigator.xml.njk
new file mode 100644
index 000000000..7a058e4d1
--- /dev/null
+++ b/demo/backend/navigation/navigator.xml.njk
@@ -0,0 +1,17 @@
+---
+permalink: "/navigation/navigator.xml"
+hv_title: "Navigation"
+hv_tab_id: "navigation"
+hv_button_behavior: "none"
+---
+{% extends 'templates/tab-route.xml.njk' %}
+
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+
+{% block tab_route_content %}
+  {{ tabbar_top([
+  {id: "navigation-behaviors-route", label: "Behaviors"},
+  {id: "navigator-route", label: "Navigator", selected: true}
+  ]) }}
+  {% include './navigator/content.xml.njk' %}
+{% endblock %}
diff --git a/demo/backend/navigation/navigator/nested-tabs/_styles.xml.njk b/demo/backend/navigation/navigator/nested-tabs/_styles.xml.njk
new file mode 100644
index 000000000..4d1159421
--- /dev/null
+++ b/demo/backend/navigation/navigator/nested-tabs/_styles.xml.njk
@@ -0,0 +1,81 @@
+<style
+  id="footer"
+  alignItems="stretch"
+  borderTopColor="#eee"
+  borderTopWidth="1"
+  bottom="0"
+  flexDirection="column"
+  flexShrink="1"
+  flexGrow="0"
+  height="96"
+  justifyContent="space-around"
+  backgroundColor="white"
+  position="absolute"
+  width="100%"
+/>
+<style
+  id="footer-row"
+  alignItems="center"
+  flexDirection="row"
+  flexGrow="1"
+  justifyContent="space-around"
+/>
+<style
+  id="top-tabs"
+  alignItems="stretch"
+  backgroundColor="#f5f6ff"
+  borderBottomColor="#e1e6ff"
+  borderBottomWidth="1"
+  flexDirection="row"
+  width="100%"
+/>
+<style
+  id="top-tab"
+  alignItems="center"
+  backgroundColor="#f5f6ff"
+  flex="1"
+  justifyContent="center"
+  paddingVertical="10"
+/>
+<style
+  id="top-tab-link"
+  alignItems="stretch"
+  flex="1"
+/>
+<style
+  id="top-tab-selected"
+  backgroundColor="#dbe6ff"
+/>
+<style
+  id="top-tab-label"
+  color="#111318"
+  fontSize="14"
+  fontWeight="bold"
+  lineHeight="18"
+  textAlign="center"
+/>
+<style
+  id="top-tab-label-selected"
+  color="#2c5dff"
+/>
+<style
+  id="bottom-tab"
+  alignItems="center"
+  flex="1"
+  justifyContent="center"
+/>
+<style
+  id="bottom-tab-label"
+  color="#cccccc"
+  fontSize="14"
+  fontWeight="bold"
+/>
+<style
+  id="bottom-tab-label-selected"
+  color="#4778FF"
+/>
+<style
+  id="bottom-tab-icon"
+  height="24"
+  width="24"
+/>
diff --git a/demo/backend/navigation/navigator/nested-tabs/heart2.png b/demo/backend/navigation/navigator/nested-tabs/heart2.png
new file mode 100755
index 000000000..e0f3704e5
Binary files /dev/null and b/demo/backend/navigation/navigator/nested-tabs/heart2.png differ
diff --git a/demo/backend/navigation/navigator/nested-tabs/index.xml.njk b/demo/backend/navigation/navigator/nested-tabs/index.xml.njk
new file mode 100644
index 000000000..5a57c0b8b
--- /dev/null
+++ b/demo/backend/navigation/navigator/nested-tabs/index.xml.njk
@@ -0,0 +1,32 @@
+---
+permalink: "/navigation/navigator/nested-tabs/index.xml"
+tags: "Navigation/Navigator"
+hv_title: "Nested Tabs"
+hv_button_behavior: "back"
+---
+
+{#
+Nested Tab Navigator Hierarchy:
+Stack Navigator (top-stack)                           ← This file
+└── Tab Navigator (top-level-tab-navigator)           ← This file
+    ├── tab-1-2-route → nested tab navigator (tabs 1 & 2)
+    └── tab-3-4-route → nested tab navigator (tabs 3 & 4)
+#}
+
+<doc xmlns="https://hyperview.org/hyperview">
+  <navigator id="top-stack" type="stack">
+    <nav-route id="tabs-route">
+      <navigator id="top-level-tab-navigator" type="tab">
+        <nav-route
+          id="tab-1-2-route"
+          href="/hyperview/public/navigation/navigator/nested-tabs/tab-1-2-route.xml"
+        />
+        <nav-route
+          id="tab-3-4-route"
+          href="/hyperview/public/navigation/navigator/nested-tabs/tab-3-4-route.xml"
+        />
+      </navigator>
+    </nav-route>
+  </navigator>
+</doc>
+
diff --git a/demo/backend/navigation/navigator/nested-tabs/list2.png b/demo/backend/navigation/navigator/nested-tabs/list2.png
new file mode 100755
index 000000000..993837916
Binary files /dev/null and b/demo/backend/navigation/navigator/nested-tabs/list2.png differ
diff --git a/demo/backend/navigation/navigator/nested-tabs/tab-1-2-route.xml.njk b/demo/backend/navigation/navigator/nested-tabs/tab-1-2-route.xml.njk
new file mode 100644
index 000000000..44fa98aa7
--- /dev/null
+++ b/demo/backend/navigation/navigator/nested-tabs/tab-1-2-route.xml.njk
@@ -0,0 +1,20 @@
+---
+permalink: "/navigation/navigator/nested-tabs/tab-1-2-route.xml"
+---
+
+{#
+Nested Tab Navigator Hierarchy:
+Stack Navigator (top-stack)
+└── Tab Navigator (top-level-tab-navigator)
+    ├── tab-1-2-route → nested tab navigator (tabs 1 & 2)  ← This file
+    │   ├── tab-1
+    │   └── tab-2
+    └── tab-3-4-route → nested tab navigator (tabs 3 & 4)
+#}
+
+<doc xmlns="https://hyperview.org/hyperview">
+  <navigator id="tab-1-2-navigator" type="tab">
+    <nav-route id="tab-1" href="/hyperview/public/navigation/navigator/nested-tabs/tab-1.xml"/>
+    <nav-route id="tab-2" href="/hyperview/public/navigation/navigator/nested-tabs/tab-2.xml"/>
+  </navigator>
+</doc>
diff --git a/demo/backend/navigation/navigator/nested-tabs/tab-1.xml.njk b/demo/backend/navigation/navigator/nested-tabs/tab-1.xml.njk
new file mode 100644
index 000000000..d109255a8
--- /dev/null
+++ b/demo/backend/navigation/navigator/nested-tabs/tab-1.xml.njk
@@ -0,0 +1,58 @@
+---
+permalink: "/navigation/navigator/nested-tabs/tab-1.xml"
+hv_title: "Nested Tabs - Tab 1"
+hv_button_behavior: "back"
+---
+{% from 'macros/description/index.xml.njk' import description %}
+{% from 'macros/button/index.xml.njk' import button %}
+{% extends 'templates/base.xml.njk' %}
+
+{% block styles %}
+  {% include './_styles.xml.njk' %}
+{% endblock %}
+
+{% block container %}
+  <view style="top-tabs">
+    <view
+      style="top-tab top-tab-selected"
+    >
+      <text style="top-tab-label top-tab-label-selected">Tab 1</text>
+    </view>
+    <view
+      style="top-tab"
+      href-style="top-tab-link"
+      action="navigate"
+      href="#tab-2"
+    >
+      <text style="top-tab-label">Tab 2</text>
+    </view>
+  </view>
+  <view scroll="true">
+    {{ description('This is the content for tab 1.') }}
+  </view>
+  <view id="Footer" style="footer">
+    <view style="footer-row">
+      <view
+        style="bottom-tab bottom-tab-selected"
+      >
+        <image
+          source="/hyperview/public/navigation/navigator/nested-tabs/heart2.png"
+          style="bottom-tab-icon bottom-tab-selected"
+        />
+        <text style="bottom-tab-label bottom-tab-label-selected">Tabs 1-2</text>
+      </view>
+      <view
+        style="bottom-tab"
+        href-style="bottom-tab"
+        action="navigate"
+        href="#tab-3-4-route"
+      >
+        <image
+          source="/hyperview/public/navigation/navigator/nested-tabs/list2.png"
+          style="bottom-tab-icon"
+        />
+        <text style="bottom-tab-label">Tabs 3-4</text>
+      </view>
+    </view>
+  </view>
+{% endblock %}
diff --git a/demo/backend/navigation/navigator/nested-tabs/tab-2.xml.njk b/demo/backend/navigation/navigator/nested-tabs/tab-2.xml.njk
new file mode 100644
index 000000000..1d68e405a
--- /dev/null
+++ b/demo/backend/navigation/navigator/nested-tabs/tab-2.xml.njk
@@ -0,0 +1,58 @@
+---
+permalink: "/navigation/navigator/nested-tabs/tab-2.xml"
+hv_title: "Nested Tabs - Tab 2"
+hv_button_behavior: "back"
+---
+{% from 'macros/description/index.xml.njk' import description %}
+{% from 'macros/button/index.xml.njk' import button %}
+{% extends 'templates/base.xml.njk' %}
+
+{% block styles %}
+  {% include './_styles.xml.njk' %}
+{% endblock %}
+
+{% block container %}
+  <view style="top-tabs">
+    <view
+      style="top-tab"
+      href-style="top-tab-link"
+      action="navigate"
+      href="#tab-1"
+    >
+      <text style="top-tab-label">Tab 1</text>
+    </view>
+    <view
+      style="top-tab top-tab-selected"
+    >
+      <text style="top-tab-label top-tab-label-selected">Tab 2</text>
+    </view>
+  </view>
+  <view scroll="true">
+    {{ description('This is the content for tab 2.') }}
+  </view>
+  <view id="Footer" style="footer">
+    <view style="footer-row">
+      <view
+        style="bottom-tab bottom-tab-selected"
+      >
+        <image
+          source="/hyperview/public/navigation/navigator/nested-tabs/heart2.png"
+          style="bottom-tab-icon bottom-tab-selected"
+        />
+        <text style="bottom-tab-label bottom-tab-label-selected">Tabs 1-2</text>
+      </view>
+      <view
+        style="bottom-tab"
+        href-style="bottom-tab"
+        action="navigate"
+        href="#tab-3-4-route"
+      >
+        <image
+          source="/hyperview/public/navigation/navigator/nested-tabs/list2.png"
+          style="bottom-tab-icon"
+        />
+        <text style="bottom-tab-label">Tabs 3-4</text>
+      </view>
+    </view>
+  </view>
+{% endblock %}
diff --git a/demo/backend/navigation/navigator/nested-tabs/tab-3-4-route.xml.njk b/demo/backend/navigation/navigator/nested-tabs/tab-3-4-route.xml.njk
new file mode 100644
index 000000000..fa66bacea
--- /dev/null
+++ b/demo/backend/navigation/navigator/nested-tabs/tab-3-4-route.xml.njk
@@ -0,0 +1,20 @@
+---
+permalink: "/navigation/navigator/nested-tabs/tab-3-4-route.xml"
+---
+
+{#
+Nested Tab Navigator Hierarchy:
+Stack Navigator (top-stack)
+└── Tab Navigator (top-level-tab-navigator)
+    ├── tab-1-2-route → nested tab navigator (tabs 1 & 2)
+    └── tab-3-4-route → nested tab navigator (tabs 3 & 4)  ← This file
+        ├── tab-3
+        └── tab-4
+#}
+
+<doc xmlns="https://hyperview.org/hyperview">
+  <navigator id="tab-3-4-navigator" type="tab">
+    <nav-route id="tab-3" href="/hyperview/public/navigation/navigator/nested-tabs/tab-3.xml"/>
+    <nav-route id="tab-4" href="/hyperview/public/navigation/navigator/nested-tabs/tab-4.xml"/>
+  </navigator>
+</doc>
diff --git a/demo/backend/navigation/navigator/nested-tabs/tab-3.xml.njk b/demo/backend/navigation/navigator/nested-tabs/tab-3.xml.njk
new file mode 100644
index 000000000..b5a94a149
--- /dev/null
+++ b/demo/backend/navigation/navigator/nested-tabs/tab-3.xml.njk
@@ -0,0 +1,58 @@
+---
+permalink: "/navigation/navigator/nested-tabs/tab-3.xml"
+hv_title: "Nested Tabs - Tab 3"
+hv_button_behavior: "back"
+---
+{% from 'macros/description/index.xml.njk' import description %}
+{% from 'macros/button/index.xml.njk' import button %}
+{% extends 'templates/base.xml.njk' %}
+
+{% block styles %}
+  {% include './_styles.xml.njk' %}
+{% endblock %}
+
+{% block container %}
+  <view style="top-tabs">
+    <view
+      style="top-tab top-tab-selected"
+    >
+      <text style="top-tab-label top-tab-label-selected">Tab 3</text>
+    </view>
+    <view
+      style="top-tab"
+      href-style="top-tab-link"
+      action="navigate"
+      href="#tab-4"
+    >
+      <text style="top-tab-label">Tab 4</text>
+    </view>
+  </view>
+  <view scroll="true">
+    {{ description('This is the content for tab 3.') }}
+  </view>
+  <view id="Footer" style="footer">
+    <view style="footer-row">
+      <view
+        style="bottom-tab"
+        href-style="bottom-tab"
+        action="navigate"
+        href="#tab-1-2-route"
+      >
+        <image
+          source="/hyperview/public/navigation/navigator/nested-tabs/heart2.png"
+          style="bottom-tab-icon"
+        />
+        <text style="bottom-tab-label">Tabs 1-2</text>
+      </view>
+      <view
+        style="bottom-tab bottom-tab-selected"
+      >
+        <image
+          source="/hyperview/public/navigation/navigator/nested-tabs/list2.png"
+          style="bottom-tab-icon bottom-tab-selected"
+        />
+        <text style="bottom-tab-label bottom-tab-label-selected">Tabs 3-4</text>
+      </view>
+    </view>
+  </view>
+{% endblock %}
diff --git a/demo/backend/navigation/navigator/nested-tabs/tab-4.xml.njk b/demo/backend/navigation/navigator/nested-tabs/tab-4.xml.njk
new file mode 100644
index 000000000..a3295fb2b
--- /dev/null
+++ b/demo/backend/navigation/navigator/nested-tabs/tab-4.xml.njk
@@ -0,0 +1,58 @@
+---
+permalink: "/navigation/navigator/nested-tabs/tab-4.xml"
+hv_title: "Nested Tabs - Tab 4"
+hv_button_behavior: "back"
+---
+{% from 'macros/description/index.xml.njk' import description %}
+{% from 'macros/button/index.xml.njk' import button %}
+{% extends 'templates/base.xml.njk' %}
+
+{% block styles %}
+  {% include './_styles.xml.njk' %}
+{% endblock %}
+
+{% block container %}
+  <view style="top-tabs">
+    <view
+      style="top-tab"
+      href-style="top-tab-link"
+      action="navigate"
+      href="#tab-3"
+    >
+      <text style="top-tab-label">Tab 3</text>
+    </view>
+    <view
+      style="top-tab top-tab-selected"
+    >
+      <text style="top-tab-label top-tab-label-selected">Tab 4</text>
+    </view>
+  </view>
+  <view scroll="true">
+    {{ description('This is the content for tab 4.') }}
+  </view>
+  <view id="Footer" style="footer">
+    <view style="footer-row">
+      <view
+        style="bottom-tab"
+        href-style="bottom-tab"
+        action="navigate"
+        href="#tab-1-2-route"
+      >
+        <image
+          source="/hyperview/public/navigation/navigator/nested-tabs/heart2.png"
+          style="bottom-tab-icon"
+        />
+        <text style="bottom-tab-label">Tabs 1-2</text>
+      </view>
+      <view
+        style="bottom-tab bottom-tab-selected"
+      >
+        <image
+          source="/hyperview/public/navigation/navigator/nested-tabs/list2.png"
+          style="bottom-tab-icon bottom-tab-selected"
+        />
+        <text style="bottom-tab-label bottom-tab-label-selected">Tabs 3-4</text>
+      </view>
+    </view>
+  </view>
+{% endblock %}
diff --git a/demo/backend/ui/index.xml.njk b/demo/backend/ui/index.xml.njk
index 308158948..0c6643fa1 100644
--- a/demo/backend/ui/index.xml.njk
+++ b/demo/backend/ui/index.xml.njk
@@ -2,22 +2,20 @@
 permalink: "/ui/index.xml"
 hv_title: "UI"
 hv_tab_id: "ui"
-hv_button_behavior: "none"
 ---
-{% extends 'templates/tab-route.xml.njk' %}
+{% extends 'templates/root.xml.njk' %}
 
-{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
-{% from 'macros/tabbar-top-tab/index.xml.njk' import tabbar_top_tab %}
-
-{% block tab_route_content %}
-  {{ tabbar_top([
-  {id: "tab-ui-elements", label: "UI Elements", selected: true},
-  {id: "tab-styling", label: "Styling"}
-  ]) }}
-  {% call tabbar_top_tab("tab-ui-elements", true) -%}
-    {% include './ui-elements/content.xml.njk' %}
-  {%- endcall -%}
-  {% call tabbar_top_tab("tab-styling") -%}
-    {% include './styling/content.xml.njk' %}
-  {%- endcall -%}
+{% block root %}
+  <doc xmlns="https://hyperview.org/hyperview">
+    <navigator id="ui-nested-tabs" type="tab">
+      <nav-route
+        id="ui-elements-route"
+        href="/hyperview/public/ui/ui-elements.xml"
+      />
+      <nav-route
+        id="styling-route"
+        href="/hyperview/public/ui/styling.xml"
+      />
+    </navigator>
+  </doc>
 {% endblock %}
diff --git a/demo/backend/ui/styling.xml.njk b/demo/backend/ui/styling.xml.njk
new file mode 100644
index 000000000..911802db5
--- /dev/null
+++ b/demo/backend/ui/styling.xml.njk
@@ -0,0 +1,17 @@
+---
+permalink: "/ui/styling.xml"
+hv_title: "UI"
+hv_tab_id: "ui"
+hv_button_behavior: "none"
+---
+{% extends 'templates/tab-route.xml.njk' %}
+
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+
+{% block tab_route_content %}
+  {{ tabbar_top([
+  {id: "ui-elements-route", label: "UI Elements"},
+  {id: "styling-route", label: "Styling", selected: true}
+  ]) }}
+  {% include './styling/content.xml.njk' %}
+{% endblock %}
diff --git a/demo/backend/ui/ui-elements.xml.njk b/demo/backend/ui/ui-elements.xml.njk
new file mode 100644
index 000000000..fcd5cf9b8
--- /dev/null
+++ b/demo/backend/ui/ui-elements.xml.njk
@@ -0,0 +1,17 @@
+---
+permalink: "/ui/ui-elements.xml"
+hv_title: "UI"
+hv_tab_id: "ui"
+hv_button_behavior: "none"
+---
+{% extends 'templates/tab-route.xml.njk' %}
+
+{% from 'macros/tabbar-top/index.xml.njk' import tabbar_top %}
+
+{% block tab_route_content %}
+  {{ tabbar_top([
+  {id: "ui-elements-route", label: "UI Elements", selected: true},
+  {id: "styling-route", label: "Styling"}
+  ]) }}
+  {% include './ui-elements/content.xml.njk' %}
+{% endblock %}