Language Switch

Methanol’s multi-language setup is directory-based: any directory index.mdx page with lang becomes a language entry.

In templates you get:

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

Simple <select> Switcher

const LanguageSwitch = ({ ctx }) => {
	const languages = Array.isArray(ctx.languages) ? ctx.languages : []
	if (!languages.length) return null
	const currentHref = ctx.language?.routeHref || null
	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>
	)
}

const LanguageLinks = ({ ctx }) => {
	const languages = Array.isArray(ctx.languages) ? ctx.languages : []
	if (!languages.length) return null
	const currentHref = ctx.language?.routeHref
	return (
		<nav aria-label="Languages">
			{languages.map((lang) => (
				<a href={lang.routeHref} aria-current={lang.routeHref === currentHref ? 'page' : null}>
					{lang.label}
				</a>
			))}
		</nav>
	)
}

Notes: