Show version/language selectors below the title

docs/configuring.rst

@@ -16,12 +16,14 @@ For example:
         'analytics_id': 'G-XXXXXXXXXX',  #  Provided by Google in your dashboard
         'analytics_anonymize_ip': False,
         'logo_only': False,
-        'display_version': True,
+        'display_version': False,
         'prev_next_buttons_location': 'bottom',
         'style_external_links': False,
         'vcs_pageview_mode': '',
         'style_nav_header_background': 'white',
         'flyout_display': 'hidden',
+        'version_selector': True,
+        'language_selector': True,
         # Toc options
         'collapse_navigation': True,
         'sticky_navigation': True,
@@ -139,7 +141,11 @@ Miscellaneous options
     If ``True``, the version number is shown at the top of the sidebar.
 
     :type: boolean
-    :default: ``True``
+    :default: ``False``
+
+    .. versionchanged:: 3.0.0
+
+       Changed to default ``False`` in favor of ``version_selector`` and ``language_selector``.
 
 .. confval:: logo_only
 
@@ -192,6 +198,24 @@ Miscellaneous options
     :type: str
     :default: ``hidden``
 
+.. confval:: version_selector
+
+    Display a version selector below the title.
+    This feature makes usage of `Read the Docs Addons <https://docs.readthedocs.io/page/addons.html>`_ for this,
+    so it's required the documentation to be hosted on Read the Docs.
+
+    :type: boolean
+    :default: ``True``
+
+.. confval:: language_selector
+
+    Display a language selector below the title.
+    This feature makes usage of `Read the Docs Addons <https://docs.readthedocs.io/page/addons.html>`_ for this,
+    so it's required the documentation to be serverd on Read the Docs.
+
+    :type: boolean
+    :default: ``True``
+
 
 File-wide metadata
 ==================

sphinx_rtd_theme/layout.html

@@ -67,7 +67,7 @@
     {%- endfor %}
     <script src="{{ pathto('_static/js/theme.js', 1) }}"></script>
 
-    {%- if READTHEDOCS and theme_flyout_display != "hidden" %}
+    {%- if READTHEDOCS %}
     <script src="{{ pathto('_static/js/versions.js', 1) }}"></script>
     {%- endif %}
 
@@ -136,6 +136,12 @@
             {%- endif %}
           {%- endif %}
 
+          {%- if READTHEDOCS %}
+            {%- if theme_version_selector or theme_language_selector %}
+            <div class="dropdown-selectors"></div>
+            {%- endif %}
+          {%- endif %}
+
           {%- include "searchbox.html" %}
 
           {%- endblock %}

sphinx_rtd_theme/static/js/versions.js_t

@@ -1,3 +1,4 @@
+{%- if theme_flyout_display == "attached" %}
 function renderLanguages(config) {
    if (!config.projects.translations.length) {
      return "";
@@ -123,3 +124,68 @@ function renderLanguages(config) {
       document.dispatchEvent(event);
     });
  });
+{%- endif %}
+
+
+{%- if theme_version_selector or theme_language_selector %}
+function onSelectorSwitch(event) {
+     const option = event.target.selectedIndex;
+     const item = event.target.options[option];
+     window.location.href = item.dataset.url;
+ }
+
+document.addEventListener("readthedocs-addons-data-ready", function(event) {
+  const config = event.detail.data();
+
+  const dropdownSelectors = document.querySelector("div.dropdown-selectors");
+
+  {%- if theme_version_selector %}
+  const versionSelect = `
+    <select id="readthedocs-version-selector">
+      ${ config.versions.active.map(
+          (version) => `
+          <option
+              value="${ version.slug }"
+              ${ config.versions.current.slug === version.slug ? 'selected="selected"' : '' }
+              data-url="${ version.urls.documentation }">
+              ${ version.slug }
+          </option>`
+      ).join("\n") }
+    </select>
+  `;
+
+  dropdownSelectors.insertAdjacentHTML("beforeend", versionSelect);
+  const versionSelector = document.querySelector("#readthedocs-version-selector");
+  versionSelector.addEventListener("change", onSelectorSwitch);
+  versionSelector.innerHTML = versionSelect;
+  {%- endif %}
+
+
+  {%- if theme_language_selector %}
+  if (config.projects.translations.length) {
+    // Add the current language to the options on the selector
+    let languages = config.projects.translations.concat(config.projects.current);
+    languages = languages.sort((a, b) => a.language.name.localeCompare(b.language.name));
+
+    const languageSelect= `
+      <select id="readthedocs-version-selector">
+        ${ languages.map(
+          (language) => `
+              <option
+                  value="${ language.language.code }"
+                  ${ config.projects.current.slug === language.slug ? 'selected="selected"' : '' }
+                  data-url="${ language.urls.documentation }">
+                  ${ language.language.name }
+              </option>`
+        ).join("\n") }
+       </select>
+    `;
+
+    dropdownSelectors.insertAdjacentHTML("beforeend", languageSelect);
+    const languageSelector = document.querySelector("#readthedocs-language-selector");
+    languageSelector.addEventListener("change", onSelectorSwitch);
+    languageSelector.innerHTML = languageSelect;
+  }
+  {%- endif %}
+});
+{%- endif %}

sphinx_rtd_theme/theme.conf

@@ -13,9 +13,11 @@ navigation_depth = 4
 includehidden = True
 titles_only =
 logo_only =
-display_version = True
+display_version = False
 prev_next_buttons_location = bottom
 style_external_links = False
 style_nav_header_background =
 vcs_pageview_mode =
 flyout_display = hidden
+version_selector = True
+language_selector = True

src/sass/_theme_layout.sass

@@ -217,7 +217,7 @@ html
     padding: ($base-line-height / 6) ($base-line-height / 4)
     margin-bottom: $gutter / 2
     max-width: 100%
-    &:hover
+    &:hover, &active, &focus
       background: rgba(255, 255, 255, 0.1)
     img.logo
       display: block  // display on its own line all the time
@@ -231,10 +231,48 @@ html
       img.logo
         margin-top: 0.85em  // space it away from the title text
   > div.version
+    margin-top: -1 * $gutter / 4
+    margin-bottom: $gutter / 2
+    font-weight: normal
+    color: rgba(255, 255,255, 0.3)
+  > div.dropdown-selectors
     margin-top: -1 * $gutter / 4
     margin-bottom: $gutter / 2
     font-weight: normal
     color: rgba(255, 255, 255, 0.3)
+    select
+      max-width: 10em
+      text-align-last: center
+      background: none
+      border: none
+      border-radius: 0em
+      box-shadow: none
+      font-family: $base-font-family
+      font-size: 1em
+      font-weight: normal
+      color: rgba(255, 255, 255, .3)
+      // Allow for padding
+      appearance: none
+      -webkit-appearance: none
+      -moz-appearance: none
+      &:hover, &:active, &:focus
+        background: rgba(255, 255, 255, .1)
+        color: rgba(255, 255, 255, .5)
+      &:after
+        content: "\f0d7"
+        font-size: 1em
+        line-height: 1.2em
+        font-family: FontAwesome
+        padding: .1em .5em
+        position: absolute
+        right: 0
+        top: 0
+        z-index: 1
+        text-align: center
+        width: 1.5em
+        height: 100%
+        pointer-events: none
+        box-sizing: border-box
 
 .wy-nav .wy-menu-vertical
   header