diff --git a/src/css/header.css b/src/css/header.css
index 596f561..8a8215b 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -8,7 +8,7 @@ html.is-clipped--navbar {
 }
 
 body {
-  padding-top: var(--navbar-height);
+  padding-top: var(--body-top);
 }
 
 .navbar {
@@ -17,7 +17,7 @@ body {
   font-size: calc(16 / var(--rem-base) * 1rem);
   height: var(--navbar-height);
   position: fixed;
-  top: 0;
+  top: var(--universal-nav-height);
   width: 100%;
   z-index: var(--z-index-navbar);
   display: flex;
@@ -233,7 +233,7 @@ body {
   position: fixed;
   display: none;
   z-index: 5;
-  top: var(--navbar-height);
+  top: var(--body-top);
   width: 100%;
   background: var(--navbar-menu-background);
   box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
diff --git a/src/css/nav.css b/src/css/nav.css
index f5ae6e9..12e1f0b 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -10,7 +10,7 @@
 
 .nav-container {
   position: fixed;
-  top: var(--navbar-height);
+  top: var(--body-top);
   left: 0;
   width: 100%;
   font-size: calc(17 / var(--rem-base) * 1rem);
@@ -54,7 +54,7 @@
 
 @media screen and (min-width: 1024px) {
   .nav {
-    top: calc(var(--navbar-height));
+    top: var(--body-top);
     box-shadow: none;
     position: sticky;
     height: var(--nav-height--desktop);
diff --git a/src/css/site.css b/src/css/site.css
index 3caccc1..cab1180 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -10,6 +10,7 @@
 @import "toc.css";
 @import "doc.css";
 @import "pagination.css";
+@import "universal-nav.css";
 @import "header.css";
 @import "footer.css";
 @import "highlight.css";
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index ae22f75..f545901 100644
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -18,7 +18,7 @@
 
 @media screen and (min-width: 1024px) {
   .toolbar {
-    top: calc(var(--navbar-height));
+    top: var(--body-top);
   }
 }
 
diff --git a/src/css/universal-nav.css b/src/css/universal-nav.css
new file mode 100644
index 0000000..adf1463
--- /dev/null
+++ b/src/css/universal-nav.css
@@ -0,0 +1,302 @@
+/**
+ * The Stackable universal navigation strip — links the three Stackable
+ * properties (stackable.tech, docs, hub), mirroring the hub's meta strip.
+ */
+
+.universal-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--universal-nav-height);
+  z-index: var(--z-index-universal-nav);
+  background: var(--universal-nav-background);
+  color: var(--universal-nav-font-color);
+  border-bottom: solid 1px transparent;
+}
+
+.universal-nav__bar {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  height: 100%;
+  padding: 0 28px;
+}
+
+.universal-nav a {
+  text-decoration: none;
+}
+
+.universal-nav__brand {
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  flex: none;
+}
+
+.universal-nav__logo {
+  display: block;
+  height: 20px;
+  width: auto;
+}
+
+.universal-nav__sep {
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.16);
+  flex: none;
+}
+
+.universal-nav__tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+}
+
+.universal-nav__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 7px;
+  color: rgba(255, 255, 255, 0.62);
+  font-size: 13.5px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition:
+    background var(--universal-nav-duration-fast) var(--universal-nav-ease),
+    color var(--universal-nav-duration-fast) var(--universal-nav-ease);
+}
+
+.universal-nav__tab:hover {
+  background: var(--universal-nav-hover-background);
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.universal-nav__tab.is-current {
+  color: var(--universal-nav-font-color);
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.universal-nav__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex: none;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.universal-nav__tab.is-current .universal-nav__dot {
+  background: var(--universal-nav-accent-current);
+}
+
+.universal-nav__dot--site {
+  background: var(--universal-nav-accent-site);
+}
+
+.universal-nav__dot--docs {
+  background: var(--universal-nav-accent-docs);
+}
+
+.universal-nav__dot--hub {
+  background: var(--universal-nav-accent-hub);
+}
+
+.universal-nav__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: rgba(255, 255, 255, 0.7);
+  transition: color var(--universal-nav-duration-fast) var(--universal-nav-ease);
+}
+
+.universal-nav__icon:hover {
+  color: var(--universal-nav-font-color);
+}
+
+.universal-nav__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 16px;
+  border-radius: 99px;
+  background: var(--universal-nav-cta-background);
+  color: var(--universal-nav-cta-font-color);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  flex: none;
+  transition: background var(--universal-nav-duration-fast) var(--universal-nav-ease);
+}
+
+.universal-nav__cta:hover {
+  background: var(--universal-nav-cta-hover-background);
+}
+
+.universal-nav__disclosure {
+  display: none;
+  align-items: center;
+  gap: 7px;
+  margin-left: auto;
+  padding: 6px 8px;
+  border: 0;
+  background: none;
+  color: var(--universal-nav-font-color);
+  border-radius: 7px;
+  font-size: 13.5px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.universal-nav__disclosure:hover {
+  background: var(--universal-nav-hover-background);
+}
+
+.universal-nav__caret {
+  display: inline-flex;
+  color: rgba(255, 255, 255, 0.7);
+  transition: transform var(--universal-nav-duration-med) var(--universal-nav-ease);
+}
+
+.universal-nav__disclosure[aria-expanded="true"] .universal-nav__caret {
+  transform: rotate(180deg);
+}
+
+.universal-nav__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.universal-nav__sheet {
+  position: absolute;
+  top: var(--universal-nav-height);
+  left: 0;
+  width: 100%;
+  background: var(--universal-nav-background);
+  border-bottom: solid 1px rgba(255, 255, 255, 0.16);
+  padding: 8px 12px 12px;
+  line-height: 1.5;
+}
+
+.universal-nav__sheet[hidden] {
+  display: none;
+}
+
+.universal-nav__sheet-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 9px;
+  margin-bottom: 4px;
+  border: 1px solid transparent;
+}
+
+.universal-nav__sheet-row:hover {
+  background: var(--universal-nav-hover-background);
+}
+
+.universal-nav__sheet-row.is-current {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.universal-nav__sheet-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex: none;
+}
+
+.universal-nav__sheet-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.universal-nav__sheet-name {
+  display: block;
+  font-size: 14.5px;
+  font-weight: 700;
+  color: var(--universal-nav-font-color);
+}
+
+.universal-nav__sheet-host {
+  display: block;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: var(--monospace-font-family);
+  font-size: 11px;
+  margin-top: 1px;
+}
+
+.universal-nav__here {
+  color: var(--universal-nav-accent-current);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.universal-nav__ext {
+  display: inline-flex;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.universal-nav__sheet-cta {
+  width: 100%;
+  height: 40px;
+  margin-top: 6px;
+}
+
+.universal-nav a:focus-visible,
+.universal-nav button:focus-visible {
+  outline: 2px solid var(--universal-nav-font-color);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .universal-nav__tab,
+  .universal-nav__icon,
+  .universal-nav__caret,
+  .universal-nav__disclosure,
+  .universal-nav__cta {
+    transition: none;
+  }
+}
+
+@media screen and (max-width: 720px) {
+  .universal-nav__bar {
+    padding: 0 14px;
+    gap: 10px;
+  }
+
+  .universal-nav__tabs,
+  .universal-nav__icon,
+  .universal-nav__bar > .universal-nav__cta,
+  .universal-nav__sep {
+    display: none;
+  }
+
+  .universal-nav__disclosure {
+    display: inline-flex;
+  }
+}
+
+@media screen and (min-width: 721px) {
+  .universal-nav__sheet {
+    display: none;
+  }
+}
diff --git a/src/css/vars.css b/src/css/vars.css
index 5a7c2fe..ad1b03e 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -41,6 +41,20 @@
   --navbar-menu-font-color: var(--color-text);
   --navbar-menu-font-color-hover: var(--color-brand-primary);
   --navbar-menu_hover-background: var(--color-background2);
+  /* universal nav */
+  --universal-nav-background: var(--color-text);
+  --universal-nav-font-color: var(--color-white);
+  --universal-nav-hover-background: rgba(255, 255, 255, 0.07);
+  --universal-nav-cta-background: var(--color-brand-secondary);
+  --universal-nav-cta-hover-background: #8a004e;
+  --universal-nav-cta-font-color: var(--color-white);
+  --universal-nav-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --universal-nav-duration-fast: 160ms;
+  --universal-nav-duration-med: 220ms;
+  --universal-nav-accent-current: #d4107d;
+  --universal-nav-accent-site: var(--color-brand-secondary);
+  --universal-nav-accent-docs: var(--color-brand-primary);
+  --universal-nav-accent-hub: #3d5266;
   /* nav */
   --nav-background: var(--color-white);
   --nav-border-color: var(--panel-background);
@@ -117,7 +131,8 @@
   --navbar-height: calc(73 / var(--rem-base) * 1rem);
   --navbar-sub-height: calc(45 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
-  --body-top: calc(var(--navbar-height));
+  --universal-nav-height: 44px; /* fixed px so the strip height doesn't shift with the theme's responsive root font-size */
+  --body-top: calc(var(--universal-nav-height) + var(--navbar-height));
   --body-min-height: calc(100vh - var(--body-top));
   --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
   --nav-height--desktop: var(--body-min-height);
@@ -134,4 +149,5 @@
   --z-index-page-version-menu: 3;
   --z-index-page-version-menu-button: 4;
   --z-index-navbar: 5;
+  --z-index-universal-nav: 6;
 }
diff --git a/src/img/stackable-mark.svg b/src/img/stackable-mark.svg
new file mode 100644
index 0000000..919148b
--- /dev/null
+++ b/src/img/stackable-mark.svg
@@ -0,0 +1,19 @@
+<!-- Stackable logo mark (icon only, no wordmark). -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.7 169.05">
+  <polygon points="0 14.65 0 38.13 82.97 23.78 82.97 0.29 0 14.65" style="fill: #0080bd" />
+  <polygon points="0 106.48 0 129.97 82.97 115.61 82.97 92.13 0 106.48" style="fill: #0080bd" />
+  <polygon points="82.98 23.78 165.7 37.35 165.7 13.87 82.98 0.29 82.98 23.78" style="fill: #b90069" />
+  <polygon points="82.98 69.18 165.7 82.75 165.7 59.26 82.98 45.7 82.98 69.18" style="fill: #b90069" />
+  <polygon points="82.98 169.05 165.7 169.05 165.7 150.72 82.98 137.15 82.98 169.05" style="fill: #b90069" />
+  <polygon points="83 169.05 0.28 169.05 0.28 150.72 83 137.15 83 169.05" style="fill: #0080bd" />
+  <polygon points="0 60.05 0 83.53 34.13 77.63 34.13 54.15 0 60.05" style="fill: #0080bd" />
+  <polygon points="55.65 50.42 55.65 73.91 82.98 69.18 82.98 45.7 55.65 50.42" style="fill: #0080bd" />
+  <polygon points="109.75 96.52 82.97 92.13 82.97 115.61 109.75 120.01 109.75 96.52" style="fill: #b90069" />
+  <polygon points="165.7 37.35 131.52 31.74 131.52 53.66 165.7 37.35" style="fill: #245987" />
+  <polygon points="165.7 82.75 131.52 77.14 131.52 99.01 165.7 82.75" style="fill: #245987" />
+  <polygon points="165.7 129.09 131.52 123.49 131.52 145.19 165.7 129.09" style="fill: #245987" />
+  <polygon points="0 38.13 34.13 54.15 34.09 32.23 0 38.13" style="fill: #245987" />
+  <polygon points="0 83.53 34.13 100.6 34.13 77.44 0 83.53" style="fill: #245987" />
+  <polygon points="0 129.97 34.13 145.16 34.09 124.09 0 129.97" style="fill: #245987" />
+  <polygon points="165.7 129.09 165.7 104.61 131.52 99.01 131.52 123.49 165.7 129.09" style="fill: #b90069" />
+</svg>
diff --git a/src/js/04-universal-nav.js b/src/js/04-universal-nav.js
new file mode 100644
index 0000000..8ecc5e7
--- /dev/null
+++ b/src/js/04-universal-nav.js
@@ -0,0 +1,27 @@
+;(function () {
+  'use strict'
+
+  var disclosure = document.querySelector('.universal-nav__disclosure')
+  var sheet = document.getElementById('universal-nav-sheet')
+  if (!disclosure || !sheet) return
+
+  function setOpen (open) {
+    disclosure.setAttribute('aria-expanded', String(open))
+    sheet.hidden = !open
+    var label = disclosure.querySelector('.universal-nav__sr')
+    if (label) label.textContent = (open ? 'Close' : 'Open') + ' Stackable property switcher'
+  }
+
+  disclosure.addEventListener('click', function (e) {
+    e.stopPropagation()
+    setOpen(sheet.hidden)
+  })
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !sheet.hidden) setOpen(false)
+  })
+
+  document.addEventListener('click', function (e) {
+    if (!sheet.hidden && !sheet.contains(e.target) && !disclosure.contains(e.target)) setOpen(false)
+  })
+})()
diff --git a/src/layouts/404.hbs b/src/layouts/404.hbs
index 8caab1d..d517401 100644
--- a/src/layouts/404.hbs
+++ b/src/layouts/404.hbs
@@ -4,6 +4,7 @@
 {{> head defaultPageTitle='Page Not Found'}}
   </head>
   <body class="status-404">
+{{> universal-nav}}
 {{> header}}
 {{> body}}
 {{> footer}}
diff --git a/src/layouts/default.hbs b/src/layouts/default.hbs
index c5282ec..e06fe16 100644
--- a/src/layouts/default.hbs
+++ b/src/layouts/default.hbs
@@ -4,6 +4,7 @@
 {{> head defaultPageTitle='Untitled'}}
   </head>
   <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+{{> universal-nav}}
 {{> header}}
 {{> body}}
 {{> footer}}
diff --git a/src/layouts/landing.hbs b/src/layouts/landing.hbs
index 2e3ddc0..b144bf5 100644
--- a/src/layouts/landing.hbs
+++ b/src/layouts/landing.hbs
@@ -4,6 +4,7 @@
 {{> head defaultPageTitle='Untitled'}}
   </head>
   <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+{{> universal-nav}}
 {{> header}}
     <div class="body">
         <div class="container">
diff --git a/src/partials/universal-nav-icon-external.hbs b/src/partials/universal-nav-icon-external.hbs
new file mode 100644
index 0000000..ecd8935
--- /dev/null
+++ b/src/partials/universal-nav-icon-external.hbs
@@ -0,0 +1 @@
+<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
diff --git a/src/partials/universal-nav.hbs b/src/partials/universal-nav.hbs
new file mode 100644
index 0000000..0cc783a
--- /dev/null
+++ b/src/partials/universal-nav.hbs
@@ -0,0 +1,71 @@
+{{!--
+  The Stackable universal navigation strip — links the three Stackable properties
+  (stackable.tech, docs, hub), mirroring the hub's meta strip. Collapses to a
+  property switcher on small screens.
+--}}
+<div class="universal-nav" role="region" aria-label="Stackable network">
+  <div class="universal-nav__bar">
+    <a class="universal-nav__brand" href="{{{ relativize (versioned "home" page "index.html") }}}" aria-label="Stackable Documentation home">
+      <img class="universal-nav__logo" src="{{{uiRootPath}}}/img/stackable-mark.svg" alt="">
+    </a>
+
+    <span class="universal-nav__sep" aria-hidden="true"></span>
+
+    <nav class="universal-nav__tabs" aria-label="Stackable properties">
+      <a class="universal-nav__tab" href="https://stackable.tech">
+        <span class="universal-nav__dot" aria-hidden="true"></span>
+        <span>Stackable</span>
+      </a>
+      <a class="universal-nav__tab is-current" href="https://docs.stackable.tech" aria-current="page">
+        <span class="universal-nav__dot" aria-hidden="true"></span>
+        <span>Documentation</span>
+      </a>
+      <a class="universal-nav__tab" href="https://hub.stackable.tech">
+        <span class="universal-nav__dot" aria-hidden="true"></span>
+        <span>Hub</span>
+      </a>
+    </nav>
+
+    <a class="universal-nav__icon" href="https://github.com/stackabletech" target="_blank" rel="noopener" aria-label="Stackable on GitHub">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2c-3.2.7-3.87-1.36-3.87-1.36-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.68 1.25 3.33.96.1-.75.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 015.79 0c2.21-1.49 3.18-1.18 3.18-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.68.8.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/></svg>
+    </a>
+    <a class="universal-nav__cta" href="https://stackable.tech">Get started (free)</a>
+
+    <button type="button" class="universal-nav__disclosure" aria-expanded="false" aria-controls="universal-nav-sheet">
+      <span class="universal-nav__dot" aria-hidden="true"></span>
+      <span>Documentation</span>
+      <span class="universal-nav__caret" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
+      <span class="universal-nav__sr">Open Stackable property switcher</span>
+    </button>
+  </div>
+
+  <div id="universal-nav-sheet" class="universal-nav__sheet" hidden>
+    <nav aria-label="Switch Stackable property">
+      <a class="universal-nav__sheet-row" href="https://stackable.tech">
+        <span class="universal-nav__sheet-dot universal-nav__dot--site" aria-hidden="true"></span>
+        <span class="universal-nav__sheet-text">
+          <span class="universal-nav__sheet-name">Stackable</span>
+          <span class="universal-nav__sheet-host">stackable.tech</span>
+        </span>
+        <span class="universal-nav__ext" aria-hidden="true">{{> universal-nav-icon-external}}</span>
+      </a>
+      <a class="universal-nav__sheet-row is-current" href="https://docs.stackable.tech" aria-current="page">
+        <span class="universal-nav__sheet-dot universal-nav__dot--docs" aria-hidden="true"></span>
+        <span class="universal-nav__sheet-text">
+          <span class="universal-nav__sheet-name">Documentation</span>
+          <span class="universal-nav__sheet-host">docs.stackable.tech</span>
+        </span>
+        <span class="universal-nav__here">You are here</span>
+      </a>
+      <a class="universal-nav__sheet-row" href="https://hub.stackable.tech">
+        <span class="universal-nav__sheet-dot universal-nav__dot--hub" aria-hidden="true"></span>
+        <span class="universal-nav__sheet-text">
+          <span class="universal-nav__sheet-name">Hub</span>
+          <span class="universal-nav__sheet-host">hub.stackable.tech</span>
+        </span>
+        <span class="universal-nav__ext" aria-hidden="true">{{> universal-nav-icon-external}}</span>
+      </a>
+    </nav>
+    <a class="universal-nav__cta universal-nav__sheet-cta" href="https://stackable.tech">Get started (free)</a>
+  </div>
+</div>