Update new docs version picker to work on home and examples pages (#36245)

* Update new docs version picker to work on home and examples pages

* Add addd key to opacity page

* Add more added frontmatter

* Update picker to fix migration guide links, but still work for docs and examples

4 files changed, 18 insertions, 3 deletions

diff --git a/site/content/docs/5.1/helpers/stacks.md b/site/content/docs/5.1/helpers/stacks.md
index 20ca86aa03..e1960c5739 100644
--- a/site/content/docs/5.1/helpers/stacks.md
+++ b/site/content/docs/5.1/helpers/stacks.md
@@ -4,6 +4,7 @@ title: Stacks
 description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
 group: helpers
 toc: true
+added: "5.1"
 ---
 
 Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
diff --git a/site/content/docs/5.1/helpers/vertical-rule.md b/site/content/docs/5.1/helpers/vertical-rule.md
index 8d0d6141f8..b734f61d46 100644
--- a/site/content/docs/5.1/helpers/vertical-rule.md
+++ b/site/content/docs/5.1/helpers/vertical-rule.md
@@ -4,6 +4,7 @@ title: Vertical rule
 description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
 group: helpers
 toc: true
+added: "5.1"
 ---
 
 ## How it works
diff --git a/site/content/docs/5.1/utilities/opacity.md b/site/content/docs/5.1/utilities/opacity.md
index a2fdc38071..5cc4c225fa 100644
--- a/site/content/docs/5.1/utilities/opacity.md
+++ b/site/content/docs/5.1/utilities/opacity.md
@@ -3,6 +3,7 @@ layout: docs
 title: Opacity
 description: Control the opacity of elements.
 group: utilities
+added: "5.1"
 ---
 
 The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
index dd234c387b..4e81c61261 100644
--- a/site/layouts/partials/docs-versions.html
+++ b/site/layouts/partials/docs-versions.html
@@ -1,22 +1,34 @@
 {{- $url := split .Permalink "/" -}}
+{{- $page_version := index $url (sub (len $url) 4) -}}
 {{- $group_slug := index $url (sub (len $url) 3) -}}
 {{- $page_slug := index $url (sub (len $url) 2) -}}
 
+{{- $versions_link := "" -}}
+{{- if and (eq .Layout "docs") (eq $page_version .Site.Params.docs_version) -}}
+  {{- .Scratch.Set "versions_link" (printf "%s/%s/" $group_slug $page_slug) -}}
+{{- else if (eq .Layout "single") }}
+  {{- .Scratch.Set "versions_link" (printf "%s/" $page_slug) -}}
+{{- end }}
+
 <li class="nav-item dropdown">
   <a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
     <span class="d-lg-none">Bootstrap</span> v{{ .Site.Params.docs_version }}
   </a>
   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
     <li><h6 class="dropdown-header">v5 releases</h6></li>
-    <li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">Latest ({{ .Site.Params.docs_version }}.x)</a></li>
     <li>
-      <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/{{ $group_slug }}/{{ $page_slug }}/">v5.1.3</a>
+      <a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/{{ .Scratch.Get "versions_link" }}">
+        Latest ({{ .Site.Params.docs_version }}.x)
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/{{ .Scratch.Get "versions_link" }}">v5.1.3</a>
     </li>
     <li>
       {{- if eq .Page.Params.added "5.1" }}
         <div class="dropdown-item disabled">v5.0.2</div>
       {{- else }}
-        <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/{{ $group_slug }}/{{ $page_slug }}/">v5.0.2</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/{{ .Scratch.Get "versions_link" }}">v5.0.2</a>
       {{- end }}
     </li>
     <li><hr class="dropdown-divider"></li>