Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Scripts
  • Templates
  • Access control banner
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Disclosure button
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • Navigation with new logo v1
  • Navigation with new logo v2
  • Notes
  • Pagination
  • Pre-footer
  • Quote component
  • RSS
  • Table of contents
  • Tag list
  • Text component
  • Translations
  • Video component

Translations

If translated versions of a page exist, link to them using the translation component.

Open this Translations in a new tab

HTML:

<nav class="l-box l-box--no-border translations" aria-label="translations">
	<div class="l-sidebar">
		<div>
			<div class="sidebar">
				<span>Read this page in:</span>
			</div>
			<div class="not-sidebar">
				<div class="l-cluster">
					<ul class="clean-list">
						<li><a href="/fr" hreflang="fr" lang="fr">Français</a></li>
						<li><a href="/zh" hreflang="zh-hans" lang="zh-hans">简体中文首页</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</nav>

¶Considerations

Note the use of the box layout, sidebar layout and cluster layout.

When using the hreflang attribute on links to indicate the language of the page that is being linked to, make sure to include the lang with the same language indicator. This is helpful to Assistive Technology users for whom the link content will be in a foreign language.

Copyright © 2025 W3C - generated 10 Jan 2025, 12:43:28 UTC

Feedback is welcome and can be submitted as a GitHub issue.