Translate your site

Let’s translate docs/intro.md to French.

Configure i18n

Modify docusaurus.config.js to add support for the fr locale:

```js title=ā€docusaurus.config.jsā€ export default { i18n: { defaultLocale: ā€˜en’, locales: [ā€˜en’, ā€˜fr’], }, };


## Translate a doc

Copy the `docs/intro.md` file to the `i18n/fr` folder:

```bash
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/

cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md

Translate i18n/fr/docusaurus-plugin-content-docs/current/intro.md in French.

Start your localized site

Start your site on the French locale:

npm run start -- --locale fr

Your localized site is accessible at http://localhost:3000/fr/ and the Getting Started page is translated.

:::caution

In development, you can only use one locale at a time.

:::

Add a Locale Dropdown

To navigate seamlessly across languages, add a locale dropdown.

Modify the docusaurus.config.js file:

```js title=ā€docusaurus.config.jsā€ export default { themeConfig: { navbar: { items: [ // highlight-start { type: ā€˜localeDropdown’, }, // highlight-end ], }, }, };


The locale dropdown now appears in your navbar:

![Locale Dropdown](/site/docs/tutorial-extras/img/localeDropdown.png)

## Build your localized site

Build your site for a specific locale:

```bash
npm run build -- --locale fr

Or build your site to include all the locales at once:

npm run build