diff --git a/config.toml b/config.toml
index eabc50e2..15816601 100644
--- a/config.toml
+++ b/config.toml
@@ -52,6 +52,9 @@ current_version_url = "https://spec.matrix.org/latest"
 #major = "1"
 #minor = "2"
 #release_date = "February 02, 2022"
+# Released versions to show in the version dropdown. Th template will also include a "historical" entry,
+# and (if the status above is "stable") an "unstable" entry.
+history = [ "unstable", "v1.2", "v1.1", "historical" ]
 
 # User interface configuration
 [params.ui]
diff --git a/layouts/partials/hooks/body-end.html b/layouts/partials/hooks/body-end.html
index 377470d9..0c27c8c3 100644
--- a/layouts/partials/hooks/body-end.html
+++ b/layouts/partials/hooks/body-end.html
@@ -15,3 +15,4 @@
 */}}
 
 <script defer language="javascript" type="text/javascript"  src="{{ "js/toc.js" | urlize | relURL }}"></script>
+<script defer language="javascript" type="text/javascript"  src="{{ "js/version_selector.js" | urlize | relURL }}"></script>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index e78ee9c4..c96c30a9 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -8,9 +8,10 @@
 
 {{ $cover := .HasShortcode "blocks/cover" }}
 <nav class="js-navbar-scroll navbar navbar-expand navbar-light {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
-        <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
-		<span class="navbar-logo">{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}</span><span class="font-weight-bold">specification</span><span class="navbar-version"> &mdash; {{ partial "version-string" . }}</span>
-	</a>
+	<span class="navbar-brand">
+		<a href="{{ .Site.Home.RelPermalink }}">
+			<span class="navbar-logo">{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}</span><span class="font-weight-bold">specification</span></a><span class="navbar-version"> &mdash; {{ partial "version-selector" . }}</span>
+	</span>
 	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
 		<ul class="navbar-nav mt-2 mt-lg-0">
 
@@ -39,17 +40,38 @@
 </nav>
 
 
-{{ define "partials/version-string" }}
-    {{ $ret := "unstable version"}}
+{{ define "partials/version-selector" }}
+	{{ $version := .Site.Params.version }}
+	{{ $current := partial "current-version-short" . }}
+	<noscript>{{ partial "current-version-long" . }}</noscript>
+	<select id="version-selector">
+	{{ range $version.history }}
+		{{ if eq . $current }}
+		<option selected>{{ . }}</option>
+		{{ else }}
+		<option>{{ . }}</option>
+		{{ end }}
+	{{ end }}
+	</select>
+{{ end }}
 
-    {{ $status := .Site.Params.version.status }}
 
-    {{ if ne $status "unstable"}}
-        {{ $path := path.Join "changelogs" }}
+{{ define "partials/current-version-long" }}
+	{{ if eq .Site.Params.version.status "unstable" }}
+		unstable version
+    {{ else }}
+        version {{ partial "current-version-short" . }}
+	{{ end }}
+{{ end }}
 
-        {{/* produces a string similar to "version v1.5" */}}
-        {{ $ret = delimit (slice "version v" .Site.Params.version.major "." .Site.Params.version.minor) "" }}
-    {{ end }}
+
+{{ define "partials/current-version-short" }}
+    {{ $ret := "unstable"}}
+
+    {{ if ne .Site.Params.version.status "unstable"}}
+		{{/* produces a string similar to "version v1.5" */}}
+		{{ $ret = delimit (slice "v" .Site.Params.version.major "." .Site.Params.version.minor) "" }}
+	{{ end }}
 
     {{ return $ret }}
 {{ end }}
diff --git a/static/js/version_selector.js b/static/js/version_selector.js
new file mode 100644
index 00000000..c866c36d
--- /dev/null
+++ b/static/js/version_selector.js
@@ -0,0 +1,32 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const selector = document.getElementById("version-selector")
+
+  // Get the current version number and check that it or "latest" appears in the URL.
+  let current = selector.querySelector("option[selected]").value
+  let current_segment
+  console.log("current", current)
+  if (window.location.href.includes("/" + current + "/")) {
+    current_segment = "/" + current + "/"
+  } else if (window.location.href.includes("/latest/")) {
+    current_segment = "/latest/"
+  } else {
+    // If not, ditch the selector dropdown.
+    let parent = selector.parentElement
+    let fallback = parent.querySelector("noscript")
+    parent.removeChild(fallback)
+    parent.removeChild(selector)
+    parent.appendChild(document.createTextNode(fallback.innerText))
+    return
+  }
+
+  selector.addEventListener("change", event => {
+    let chosen = event.target.value
+    if (chosen === "historical") {
+        // Go to the "historical version" in the current spec's revision.
+        let parts = window.location.href.split(current_segment, 2)
+        window.location.href = parts[0] + current_segment + "changelog/#historical-versions"
+    } else {
+        window.location.href = window.location.href.replace(current_segment, "/" + chosen + "/")
+    }
+  })
+});