From ad8970293b1564e95c1fc092ed70c92b083f6c3b Mon Sep 17 00:00:00 2001
From: Hardin Gray <hgray@instawork.com>
Date: Thu, 5 Feb 2026 11:58:20 -0500
Subject: [PATCH 1/3] feat: demonstrate nested tab navigators

---
 .../navigator/nested-tabs/_styles.xml.njk     |  81 ++++++++++++++++++
 .../navigator/nested-tabs/heart2.png          | Bin 0 -> 1141 bytes
 .../navigator/nested-tabs/index.xml.njk       |  32 +++++++
 .../navigator/nested-tabs/list2.png           | Bin 0 -> 861 bytes
 .../nested-tabs/tab-1-2-route.xml.njk         |  20 +++++
 .../navigator/nested-tabs/tab-1.xml.njk       |  58 +++++++++++++
 .../navigator/nested-tabs/tab-2.xml.njk       |  58 +++++++++++++
 .../nested-tabs/tab-3-4-route.xml.njk         |  20 +++++
 .../navigator/nested-tabs/tab-3.xml.njk       |  58 +++++++++++++
 .../navigator/nested-tabs/tab-4.xml.njk       |  58 +++++++++++++
 10 files changed, 385 insertions(+)
 create mode 100644 demo/backend/navigation/navigator/nested-tabs/_styles.xml.njk
 create mode 100755 demo/backend/navigation/navigator/nested-tabs/heart2.png
 create mode 100644 demo/backend/navigation/navigator/nested-tabs/index.xml.njk
 create mode 100755 demo/backend/navigation/navigator/nested-tabs/list2.png
 create mode 100644 demo/backend/navigation/navigator/nested-tabs/tab-1-2-route.xml.njk
 create mode 100644 demo/backend/navigation/navigator/nested-tabs/tab-1.xml.njk
 create mode 100644 demo/backend/navigation/navigator/nested-tabs/tab-2.xml.njk
 create mode 100644 demo/backend/navigation/navigator/nested-tabs/tab-3-4-route.xml.njk
 create mode 100644 demo/backend/navigation/navigator/nested-tabs/tab-3.xml.njk
 create mode 100644 demo/backend/navigation/navigator/nested-tabs/tab-4.xml.njk

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 0000000000000000000000000000000000000000..e0f3704e5244424e0c11ac4cef556127fae5622b
GIT binary patch
literal 1141
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjjKx9jP7LeL$-D$|I14-?iy0WW
zg+Z8+Vb&a=a;Bopkcg59UmvUF{9L`nl>DSry^7odplSvNn+hu+GdHy)QK2F?C$HG5
z!d3~a!V1U+3F|8<fR&VF+bTu)1}He^7o{qg>Y3;nDA{o-C@9zzrKDK}xwt{K19`Se
z86_nJR{Hwo<>h+i#(Mch>H3D2mX`VkM*2oZx<D1W#g%y_i50qe#mW#vVCJ}_7AF^F
z7L;V>=P7{9O-#x!EwNQn0$BtH5O<bjrXg&~D~5Ut=s|sujJ~0sfj%~EK+nS6hoY+@
zu>hh8>???6HXx&{B7;(k^K(i;j<Pd1vH_cqB8YGuM1ymFZb4CMaWP1PDO5eO7`plh
zY!)C3B544+-^#ftHL)bWC?r2W$IdOMGBYn-!51i^;Fz3Wln0C(Gd(jKeRPFrX87i(
zWTsWRB$lMw85tN_=o%X88kvR|8CV$`S{VQx4bqOJ2CCae9~3J{u>?s1U{PQiu;T)1
zgrz4tu1F_W6JYY3<LTlU;=y}&%6`A*0Fh%4yKYS_X};^YR?V+3_396{V|mLAAIe&p
z>}hPy`KlOG%g`(JUnTcD+kD4ckG@azW}bRz@70r&?_8)p_ul&cLotJ%|1!&tot>!r
zRQzPz`t7VMx=S0kwx=f6o_YScQQ(o(SN%8Q4}bsLmU}yVMd^e)(_6o%+L<=oU@T}a
z)i`)a)pOExi$4D*g^q|9-+#X=u~MxMV0fx_e)gOtH*@S3T+?daEaT!IC?ad!x4BW~
zXU;1g%^2f*k8&3U-JIif*`z<_`rbKb(|BdPQ$O3}J64=)@k&_5_rq6o8c(Ivn^jx~
zwjSV?o#)@xw_xE#8`qnEe8ZQVdfXAmnpe3%>%!9y26wo2+;RA^Mtj}ki{A^4X0|lt
zYdjKZDxB-F*zU;5IjxBj%j-APIPbMLl3di^e$d|X!lURTy?;{fJbupiJ=<lW<yTf_
zwYo&3raip1R+iO<brJ?U+dMNrPi32>rae1cN@G^f2bQXv>2qd1)v#S;6H*wn_3X{%
z*BSykPfASQzFKX0-@+6JgY={oX3PDwGn9I#l-@rZx?W^+La_s=Ebw&ob6Mw<&;$Ub
CyrW+L

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..99383791606daa31e7949931d36528793e9ec734
GIT binary patch
literal 861
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjjKx9jP7LeL$-D$|I14-?iy0WW
zg+Z8+Vb&a=a;Bopkcg59UmvUF{9L`nl>DSry^7odplSvNn+hu+GdHy)QK2F?C$HG5
z!d3~a!V1U+3F|8<fR&VF+bTu)1}He^7o{qg>Y3;nDA{o-C@9zzrKDK}xwt{K19`Se
z86_nJR{Hwo<>h+i#(Mch>H3D2mX`VkM*2oZx<D1W#g%y_i50qe#mW#vVCJ}_7AF^F
z7L;V>=P7{9O-#x!EwNQn0$BtH5O<bjrXg&~D~5Ut=s|sujJ~0sfj%~EK+nS6hoY+@
zu>hh8>???6HXx&{B7;(k^K(i;j<Pd1vH_cqB8YGuM1ymFZb4CMaWP1PDO5eO7`plh
zY!)C3B544+-^#ftHL)bWC?r2W$IdOMGBYn-!51i^;Fz3Wln0C(Gd(jKeRPFrX87i(
zWTsWRB$lMw85tN_=o%X88kvR|8CV$^TA7+av?Hm3>bB7b#R^g^L6QJi6qp9=xPTgA
z>B)|ZWrDXGFp0Hzx;Tb-@FuTWzy5t{O3Imk|NsAga_rc#AU2JRjEo=r$-z#>jXdm9
z2l$p0YZ!7&k5ij)x^a?y!xxp9F1MqZQcOM0_M(i3)42rtmnqFs6WP<&92983Va5rj
zRkL_>>b(+Ht&9|F<Vj~v3Yh6qdVs~GaEs2OstuD;9%N`KY3^_nP3C1}5R|d|9aQ_?
Q1C-`HUHx3vIVCg!03H4cF#rGn

literal 0
HcmV?d00001

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 %}

From 7fa35fd4a4e8849e123566d9cf853d3ec4959e75 Mon Sep 17 00:00:00 2001
From: Hardin Gray <hgray@instawork.com>
Date: Thu, 5 Feb 2026 17:52:06 -0500
Subject: [PATCH 2/3] chore: implement demo top tabs

---
 .../_includes/macros/tabbar-top/index.xml.njk | 18 +++++------
 .../macros/tabbar-top/styles.xml.njk          | 17 ++++++-----
 demo/backend/advanced/case-studies.xml.njk    | 17 +++++++++++
 demo/backend/advanced/community.xml.njk       | 17 +++++++++++
 demo/backend/advanced/index.xml.njk           | 30 +++++++++----------
 demo/backend/behaviors/advanced.xml.njk       | 17 +++++++++++
 demo/backend/behaviors/basic.xml.njk          | 17 +++++++++++
 demo/backend/behaviors/content.xml.njk        | 17 -----------
 demo/backend/behaviors/index.xml.njk          | 18 +++++++++--
 demo/backend/navigation/behaviors.xml.njk     | 17 +++++++++++
 demo/backend/navigation/index.xml.njk         | 30 +++++++++----------
 demo/backend/navigation/navigator.xml.njk     | 17 +++++++++++
 demo/backend/ui/index.xml.njk                 | 30 +++++++++----------
 demo/backend/ui/styling.xml.njk               | 17 +++++++++++
 demo/backend/ui/ui-elements.xml.njk           | 17 +++++++++++
 15 files changed, 211 insertions(+), 85 deletions(-)
 create mode 100644 demo/backend/advanced/case-studies.xml.njk
 create mode 100644 demo/backend/advanced/community.xml.njk
 create mode 100644 demo/backend/behaviors/advanced.xml.njk
 create mode 100644 demo/backend/behaviors/basic.xml.njk
 delete mode 100644 demo/backend/behaviors/content.xml.njk
 create mode 100644 demo/backend/navigation/behaviors.xml.njk
 create mode 100644 demo/backend/navigation/navigator.xml.njk
 create mode 100644 demo/backend/ui/styling.xml.njk
 create mode 100644 demo/backend/ui/ui-elements.xml.njk

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/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/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 %}

From 33a893051f32e00c60f00e361b25db7aa76c839b Mon Sep 17 00:00:00 2001
From: Hardin Gray <hgray@instawork.com>
Date: Fri, 6 Feb 2026 09:31:43 -0500
Subject: [PATCH 3/3] chore: demonstrate top tab bar

---
 .../elements/top-tabbar/index.xml.njk         | 18 ++++++++++++++++++
 .../elements/top-tabbar/tab-1.xml.njk         | 19 +++++++++++++++++++
 .../elements/top-tabbar/tab-2.xml.njk         | 19 +++++++++++++++++++
 .../elements/top-tabbar/tab-3.xml.njk         | 19 +++++++++++++++++++
 4 files changed, 75 insertions(+)
 create mode 100644 demo/backend/advanced/community/elements/top-tabbar/index.xml.njk
 create mode 100644 demo/backend/advanced/community/elements/top-tabbar/tab-1.xml.njk
 create mode 100644 demo/backend/advanced/community/elements/top-tabbar/tab-2.xml.njk
 create mode 100644 demo/backend/advanced/community/elements/top-tabbar/tab-3.xml.njk

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 %}