Docusaurus language dropdown display issue

Question

I am using Docusaurus i18n integration to add the language dropdown to site, but it shows weired enter image description here

How can I handle this issue

Answer 1

Could you please elaborate a bit more on this?

This video is a detailed tutorial on how to translate your Docusaurus website and deploy it to Netlify. The video shows you all the steps, including how to add the language dropdown.

In short, you should be able to add a language dropdown to your site by simply adding the following code in docusaurus.config.js as explained here

module.exports = {
  ....
  ....
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
    localeConfigs: {
      en: {
        label: 'English',
      },
      fr: {
        label: 'Français',
      },
    },
  },
};

Finally you can add the language dropdown by adding the following code in docusaurus.config.js:

module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'localeDropdown',
          position: 'left',
        },
      ],
    },
  },
};