Always show lang menu in navbar

CHANGELOG.md

@@ -26,6 +26,11 @@ For the full list of changes, see the [0.x.y] release notes.
 
 **Breaking changes**:
 
+- **Appearance**:
+  - The **language menu** is now visible from the navbar on all screen sizes
+    ([#2303]). The menu is hidden from the sidebar by default. To restore the
+    legacy behavior, set `ui.sidebar_lang_menu` to `true` in your project's
+    config. For details see, [Adding a language menu][].
 - **Shortcodes**:
   - The alert shortcode has been reworked to address [#906] and [#939]. It can
     now be used with Markdown content, and it can contain calls to other
@@ -43,8 +48,12 @@ For the full list of changes, see the [0.x.y] release notes.
 - Hamburger menu toggle button icon changes to an X when the menu is expanded
   ([#2301]). This is a style change only.
 
-[0.x.y]: https://github.com/google/docsy/releases/latest?FIXME=v0.X.Y
 [#2300]: https://github.com/google/docsy/pull/2300
+[#2301]: https://github.com/google/docsy/pull/2301
+[#2303]: https://github.com/google/docsy/pull/2303
+[0.x.y]: https://github.com/google/docsy/releases/latest?FIXME=v0.X.Y
+[Adding a language menu]:
+  https://www.docsy.dev/docs/adding-content/navigation/#adding-a-language-drop-down
 
 ## 0.12.0
 

assets/scss/_nav.scss

@@ -46,7 +46,7 @@
   }
 
   .navbar-nav {
-    padding-top: $spacer * 0.5;
+    // padding-top: $spacer * 0.5;
     white-space: nowrap;
   }
 
@@ -69,10 +69,6 @@
     .nav-item {
       padding-inline-end: $spacer * 0.5;
     }
-
-    .navbar-nav {
-      padding-top: 0 !important;
-    }
   }
 
   @include media-breakpoint-down(lg) {
@@ -88,25 +84,73 @@
     }
 
     .navbar-nav {
-      padding-bottom: 2rem;
+      // padding-bottom: 2rem;
       overflow-x: auto;
     }
   }
 
   .td-light-dark-menu {
+    position: unset !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     .bi {
       // Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/_default/examples.html
       width: 1em;
       height: 1em;
       vertical-align: -.125em;
       fill: currentcolor;
     }
+  }
+
+  .td-lang-menu {
+    position: unset !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &__title {
+      padding-left: 0;
+      padding-right: 0;
+
+      &::before {
+        font: var(--fa-font-solid);
+        content: fa-content($fa-var-globe);
+        padding-right: 0.5rem;
+      }
+
+      &-code {
+        display: none;
+      }
 
-    &.dropdown {
       @include media-breakpoint-down(lg) {
-        position: unset;
+        &-text {
+          display: none;
+        }
+        &-code {
+          display: inline;
+        }
+        &::before {
+          padding-right: 0;
+        }
       }
     }
+
+    .dropdown-item {
+      position: relative;
+      padding-left: 2.5rem;
+
+      &.active::before {
+        font: var(--fa-font-solid);
+        content: fa-content($fa-var-check);
+        position: absolute;
+        left: 0.75rem;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
   }
 }
 

assets/scss/_sidebar-tree.scss

@@ -194,4 +194,14 @@
       display: block;
     }
   }
+
+  .td-lang-menu {
+    &__title {
+      padding-left: 0 !important;
+      &-code {
+        display: none;
+      }
+
+    }
+  }
 }

layouts/_partials/head.html

@@ -6,7 +6,7 @@
 {{ end -}}
 
 {{ $outputFormat := partial "outputformat.html" . -}}
-{{ if and hugo.IsProduction (ne $outputFormat "print") -}}
+{{ if and hugo.IsProduction (ne $outputFormat "print") (ne .Site.Language.Lang "xx") -}}
 <meta name="robots" content="index, follow">
 {{ else -}}
 <meta name="robots" content="noindex, nofollow">

layouts/_partials/navbar-lang-selector.html

@@ -1,12 +1,35 @@
 {{/* Link directly to documentation etc., if possible. */ -}}
 {{ $langPage := cond (gt (len .Translations) 0) . .Site.Home -}}
-<div class="dropdown">
-  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    {{- $langPage.Language.LanguageName -}}
+<div class="td-lang-menu dropdown">
+  <a class="nav-link dropdown-toggle td-lang-menu__title" href="#" role="button"
+    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="td-lang-menu__title-text">{{ $langPage.Language.LanguageName }}</span>
+    <span class="td-lang-menu__title-code">{{ $langPage.Language.Lang | upper }}</span>
   </a>
+  {{/* */ -}}
+
+  {{ $allPages := slice . -}}
+  {{ if .Translations -}}
+    {{ $allPages = $allPages | append .Translations -}}
+  {{ end -}}
+
   <ul class="dropdown-menu">
-    {{ range $langPage.Translations -}}
-    <li><a class="dropdown-item" href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a></li>
-    {{ end -}}
-  </ul>
+    {{ range $.Site.Languages -}}
+      {{ $translatedPages := where $allPages "Language.Lang" .Lang -}}
+      {{ $translated := "" -}}
+      {{ if gt (len $translatedPages) 0 -}}
+        {{ $translated = index $translatedPages 0 -}}
+      {{- end -}}
+      {{ $isActive := eq $.Site.Language.Lang .Lang -}}
+      <li>
+        {{- if $isActive -}}
+          <span class="dropdown-item active">{{ .LanguageName }}</span>
+        {{- else if $translated -}}
+          <a class="dropdown-item" href="{{ $translated.RelPermalink }}">{{ .LanguageName }}</a>
+        {{- else -}}
+          <span class="dropdown-item disabled">{{ .LanguageName }}</span>
+        {{- end -}}
+      </li>
+      {{- end }}
+    </ul>
 </div>

layouts/_partials/navbar.html

@@ -53,12 +53,12 @@
       </li>
       {{ end -}}
       {{ if (gt (len .Site.Home.Translations) 0) -}}
-      <li class="nav-item dropdown d-none d-lg-block">
+      <li class="nav-item">
         {{ partial "navbar-lang-selector.html" . -}}
       </li>
       {{ end -}}
       {{ if .Site.Params.ui.showLightDarkModeMenu -}}
-      <li class="td-light-dark-menu nav-item dropdown">
+      <li class="nav-item">
         {{ partial "theme-toggler" . }}
       </li>
       {{ end -}}

layouts/_partials/sidebar-tree.html

@@ -34,7 +34,7 @@
       {{- if .Site.Params.ui.sidebar_search_disable }} td-sidebar-nav--search-disabled{{ end -}}
       {{- if .Site.Params.ui.sidebar_menu_foldable }} foldable-nav{{ end -}}
       " id="td-section-nav">
-    {{ if  (gt (len .Site.Home.Translations) 0) -}}
+    {{ if and .Site.Params.ui.sidebar_lang_menu (gt (len .Site.Home.Translations) 0) -}}
     <div class="td-sidebar-nav__section nav-item dropdown d-block d-lg-none">
       {{ partial "navbar-lang-selector.html" . }}
     </div>

layouts/_partials/theme-toggler.html

@@ -1,4 +1,6 @@
-{{/* Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/partials/icons.html */ -}}
+<div class="td-light-dark-menu dropdown">
+
+{{- /* Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/partials/icons.html */ -}}
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
   <symbol id="check2" viewBox="0 0 16 16">
@@ -15,26 +17,23 @@
     <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
   </symbol>
 </svg>
+{{/* */ -}}
 
 {{/* Adapted from: https://github.com/twbs/bootstrap/blob/main/site/layouts/partials/theme-toggler.html */ -}}
 
 {{ $isExamples := eq .Layout "examples" -}}
-<button class="btn
-              {{- if $isExamples }} btn-bd-primary
-              {{- else }} btn-link nav-link
-              {{- end }} dropdown-toggle d-flex align-items-center"
+<button class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
         id="bd-theme"
         type="button"
         aria-expanded="false"
         data-bs-toggle="dropdown"
-        {{ if not $isExamples }}data-bs-display="static"{{ end }}
         aria-label="Toggle theme (auto)">
   <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
   {{- /* Disable menu name for Docsy:
     <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
   */}}
 </button>
-<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
+<ul class="dropdown-menu" aria-labelledby="bd-theme">
   <li>
     <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
       <svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg>
@@ -57,3 +56,5 @@
     </button>
   </li>
 </ul>
+</div>
+{{/* */ -}}

userguide/.htmltest.yml

@@ -8,10 +8,12 @@ TestFilesConcurrently: true
 IgnoreDirs:
   - _print
   - ^blog/(\d+/)?page/\d+
+  - ^xx # Placeholder language
 IgnoreEmptyHref: true # FIXME
 IgnoreInternalEmptyHash: true # FIXME
 IgnoreInternalURLs: # list of paths
 IgnoreURLs: # list of regexs of paths or URLs to be ignored
+  - ^(https://www.docsy.dev/)?xx/ # Placeholder language
   - \?no-link-check
   - (index.xml|_print/)$ # ignore <link rel=alternate ...>
   - ^https?://[^/]+/(categories|tags)/ # ignore Docsy-generated content

userguide/content/en/docs/adding-content/navigation.md

@@ -161,15 +161,21 @@ version selector drop down to the top-level menu.
 You can find out more in the guide to
 [versioning your docs](/docs/adding-content/versioning/).
 
-### Adding a language drop-down
+### Adding a language dropdown
 
-If you configure more than one language in `hugo.toml`, the Docsy theme adds a
-language selector drop down to the top-level menu. Selecting a language takes
-the user to the translated version of the current page, or the home page for the
-given language.
+If you configure more than one language in `hugo.toml`, Docsy adds a language
+selector drop down to the navbar menu. Selecting a language takes the user to
+the translated version of the current page, or the home page for the given
+language. The menu is visible for all screen sizes. By default current site
+language name is shown. On narrow displays, this is replaced by the language
+code.
 
 You can find out more in [Multi-language support](/docs/language/).
 
+You can control whether the language selector menu appears in the sidebar by
+setting the optional parameter `.ui.sidebar_lang_menu` to `true` (default:
+unset).
+
 ## Section menu
 
 The section menu, as shown in the left side of the `docs` section, is

userguide/hugo.yaml

@@ -31,6 +31,11 @@ languages:
     languageName: English
     params:
       description: Docsy does docs
+  # Placeholder language used to demo multilingual support
+  xx:
+    languageName: Placeholder
+    params:
+      description: Docsy does multilingual docs
 
 markup:
   tableOfContents:
@@ -77,6 +82,7 @@ params:
   ui:
     showLightDarkModeMenu: true
     sidebar_cache_limit: 10
+    sidebar_lang_menu: true # Set to true to show the language menu in the sidebar
     sidebar_menu_compact: true
     sidebar_menu_foldable: false
     sidebar_search_disable: false
@@ -147,5 +153,9 @@ module:
       target: content/project/changelog.md
     - source: ../CONTRIBUTING.md
       target: content/project/contributing.md
+    # Placeholder language used to demo multilingual support
+    - source: content/en
+      target: content
+      lang: xx
 
 # cSpell:ignore docsy github goldmark markmap plantuml readingtime userguide

userguide/static/refcache.json

@@ -1131,6 +1131,14 @@
     "StatusCode": 206,
     "LastSeen": "2025-05-22T19:21:14.104646-04:00"
   },
+  "https://github.com/google/docsy/pull/2301": {
+    "StatusCode": 206,
+    "LastSeen": "2025-08-02T17:12:43.757038-04:00"
+  },
+  "https://github.com/google/docsy/pull/2303": {
+    "StatusCode": 206,
+    "LastSeen": "2025-08-02T17:12:43.051065-04:00"
+  },
   "https://github.com/google/docsy/pull/941": {
     "StatusCode": 206,
     "LastSeen": "2025-06-10T18:59:25.465236-04:00"
@@ -2227,6 +2235,10 @@
     "StatusCode": 200,
     "LastSeen": "2025-05-16T09:20:35.492337-04:00"
   },
+  "https://www.docsy.dev/": {
+    "StatusCode": 206,
+    "LastSeen": "2025-08-02T16:19:13.783813-04:00"
+  },
   "https://www.docsy.dev/about/": {
     "StatusCode": 206,
     "LastSeen": "2025-05-16T09:20:45.23027-04:00"
@@ -2331,6 +2343,10 @@
     "StatusCode": 206,
     "LastSeen": "2024-11-06T12:06:01.765051-05:00"
   },
+  "https://www.docsy.dev/docs/adding-content/language/#adding-a-language-menu": {
+    "StatusCode": 404,
+    "LastSeen": "2025-08-02T17:12:43.30695-04:00"
+  },
   "https://www.docsy.dev/docs/adding-content/lookandfeel/#before-page-content": {
     "StatusCode": 206,
     "LastSeen": "2025-05-22T13:24:36.066951-04:00"
@@ -2347,6 +2363,10 @@
     "StatusCode": 206,
     "LastSeen": "2024-11-06T12:08:17.225307-05:00"
   },
+  "https://www.docsy.dev/docs/adding-content/navigation/#adding-a-language-drop-down": {
+    "StatusCode": 206,
+    "LastSeen": "2025-08-02T17:42:11.260079-04:00"
+  },
   "https://www.docsy.dev/docs/adding-content/navigation/#breadcrumb-navigation": {
     "StatusCode": 206,
     "LastSeen": "2025-01-08T13:26:58.452656-05:00"