diff --git a/src/client/theme-default/components/NavBarLinks.ts b/src/client/theme-default/components/NavBarLinks.ts
index f1133d63cf43..d34b8c40cc1a 100644
--- a/src/client/theme-default/components/NavBarLinks.ts
+++ b/src/client/theme-default/components/NavBarLinks.ts
@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { useSiteData, useSiteDataByRoute } from 'vitepress'
+import { useSiteData, useSiteDataByRoute, useRoute } from 'vitepress'
 import NavBarLink from './NavBarLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
 import { DefaultTheme } from '../config'
@@ -17,6 +17,7 @@ export default {
   setup() {
     const siteDataByRoute = useSiteDataByRoute()
     const siteData = useSiteData()
+    const route = useRoute()
     const repoInfo = computed(() => {
       const theme = siteData.value.themeConfig as DefaultTheme.Config
       const repo = theme.docsRepo || theme.repo
@@ -40,6 +41,43 @@ export default {
       }
       return null
     })
+
+    const localeCandidates = computed(() => {
+      const locales = siteData.value.themeConfig.locales
+      if (!locales) {
+        return null
+      }
+      const localeKeys = Object.keys(locales)
+      if (localeKeys.length <= 1) {
+        return null
+      }
+
+      const currentLangBase = localeKeys.find((v) => {
+        if (v === '/') {
+          return false
+        }
+        return route.path.startsWith(v)
+      })
+      const currentContentPath = currentLangBase
+        ? route.path.substring(currentLangBase.length - 1)
+        : route.path
+      const candidates = localeKeys.map((v) => {
+        return {
+          text: locales[v].label || locales[v].lang,
+          link: `${v}${currentContentPath}`
+        }
+      })
+
+      const currentLangKey = currentLangBase ? currentLangBase : '/'
+      const selectText = locales[currentLangKey].selectText
+        ? locales[currentLangKey].selectText
+        : 'Languages'
+      return {
+        text: selectText,
+        items: candidates
+      }
+    })
+
     return {
       navData:
         process.env.NODE_ENV === 'production'
@@ -47,7 +85,8 @@ export default {
             siteDataByRoute.value.themeConfig.nav
           : // use computed in dev for hot reload
             computed(() => siteDataByRoute.value.themeConfig.nav),
-      repoInfo
+      repoInfo,
+      localeCandidates
     }
   }
 }
diff --git a/src/client/theme-default/components/NavBarLinks.vue b/src/client/theme-default/components/NavBarLinks.vue
index ab02e2b4928c..9d1d5df22687 100644
--- a/src/client/theme-default/components/NavBarLinks.vue
+++ b/src/client/theme-default/components/NavBarLinks.vue
@@ -6,6 +6,7 @@
         <NavBarLink v-else :item="item" />
       </template>
     </template>
+    <NavDropdownLink v-if="localeCandidates" :item="localeCandidates" />
     <NavBarLink v-if="repoInfo" :item="repoInfo" />
   </nav>
 </template>
diff --git a/types/shared.d.ts b/types/shared.d.ts
index 840e6aebbea5..08fb259a2609 100644
--- a/types/shared.d.ts
+++ b/types/shared.d.ts
@@ -2,6 +2,8 @@
 
 export interface LocaleConfig {
   lang: string
+  selectText?: string
+  label?: string
   title?: string
   description?: string
   head?: HeadConfig[]