Translation Widget

The translation widget allows users to change the language of the website.


The translation widget integrates language translation into our website, enhancing user accessibility and global reach.

When to Use

The translation widget is located within the Header component. Most websites require header navigation. Most websites require some form of navigation to help users find the information they need. While a horizontal navigation bar is just one option for navigation design, it is one of the most visible and familiar ways of helping users navigate a site.

View of the translation widget on desktop



Accordion anatomy diagram
  1. Button
  2. Language Menu - Opens when button is pressed



  • Have the default menu state as closed
  • Only open the menu on press
  • Use a scroll bar when the language menu is too long


  • Open the menu on hover