Language Switcher

In Methanol, multi-language support is file-system based. Any directory containing an index.mdx with a lang property in its frontmatter is identified as a language entry point.

Your theme template receives the following language-related properties:

• ctx.languages: A list of all identified language entry points.
• ctx.language: The language entry point corresponding to the current page (or null).

Each entry includes routePath, routeHref, label, and code.

Dropdown Switcher Implementation

A standard implementation using a <select> element:

const LanguageSwitch = ({ ctx }) => {
	const languages = ctx.languages || []
	if (languages.length === 0) return null

	const currentHref = ctx.language?.routeHref
	return (
		<select
			aria-label="Select language"
			onchange="location.href=this.value"
			value={currentHref || undefined}
		>
			{languages.map((lang) => (
				<option value={lang.routeHref} selected={lang.routeHref === currentHref ? true : null}>
					{lang.label}
				</option>
			))}
		</select>
	)
}

Link List Variant

A list-based implementation suitable for footers or headers:

const LanguageLinks = ({ ctx }) => {
	const languages = ctx.languages || []
	if (languages.length === 0) return null

	const currentHref = ctx.language?.routeHref
	return (
		<nav aria-label="Language selection">
			{languages.map((lang) => (
				<a href={lang.routeHref} aria-current={lang.routeHref === currentHref ? 'page' : null}>
					{lang.label}
				</a>
			))}
		</nav>
	)
}

Implementation Notes

• URL Handling: Always use routeHref for links to ensure they are base-path aware.
• Root Scoping: It is common to set isRoot: true at each language's entry point to maintain independent navigation trees for each language.