Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.


The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.


Language toggle

Use with caution: Available
The language toggle is our way of providing translated versions of select pages on



The language toggle with the spanish option selected.
The language toggle allows users to click links to load the same page which has been translated to one of three languages.

Page context

Some, but not all, of the content on a page will be translated.
Translated content appears in the body of the page, in the side navigation, and in the breadcrumbs of the page.


When to use Component name

  • Presenting an option to switch between translated pages.: Use this component when you want to provide the user a way to switch between translated versions of the same page.

When to consider something else

  • Links to pages that don’t match.: Do not use this toggle to point to anything other than the corresponding page in the equivalent language.
  • Other language options. supports the 3 languages identified in the toggle. Do not add or remove from those 3 languages.

How this component works


  • Navigates to the same page in a different language. When selected, the language toggle brings the user to the alternate language version of the page they were on.
  • Body content, side navigation, breadcrumbs, and any alerts are translated. Currently (01/2024), the expectation is that the following sections of the page are translated:
  • Set the correct lang attribute value. See Accessibility considerations.


The component appears 32px below the “In this section” menu and 24px above the h1 of the page at mobile viewport width. It retains those same margins at desktop width however it is from the top of the .usa-content main article container for the page as “In this section” morphs into the Sidenav.

Instances of this component in production

COVID-19 vaccines at VA

The PACT Act and your VA benefits

Content considerations

  • Link is in native language. Links in this component should be in the native language. For example, “Español”. Note: Sometimes the word is the same in both English and the target language, for example “Tagalog”.

Accessibility considerations

  • The language of the page should be identified using the HTML lang attribute. For example, <article class="usa-content" lang="es">. The lang attribute is also added to the <main> element. This may disagree with the lang attribute of the <html> element. Please see H58: Using language attributes to identify changes in the human language.
  • Label the language toggle code. This ensures that it is spoken in the correct language if read aloud by assistive technologies. The lang value on the link should match that of the resulting page it links to.
Edit this page in GitHub (Permissions required)
Last updated: Jan 18, 2024