--- name: typo3-language-menu description: Build a TYPO3 v13+ language switcher menu that uses the `language-menu` DataProcessor, auto-redirects first-time visitors to their browser's preferred language, and persists the user's manual language choice in a cookie. Use this skill when adding or modifying a language selection menu in a TYPO3 site package — covers TypoScript configuration, Fluid template rendering, JavaScript browser-detection + cookie logic, and the hidden data-attribute bridge pattern between Fluid and JS. license: CC-BY-4.0 compatibility: Requires a TYPO3 v13+ site with configured site languages; browser-preference redirects require consent and privacy review appropriate to the project. --- # TYPO3 Language Menu ## Architecture Three layers work together: 1. **TypoScript** — `language-menu` data processor exposes `{languageMenu}` to Fluid 2. **Fluid partial** — renders the dropdown UI + a hidden `

` in the data list carries `data-hreflang`, `data-link`, `data-active`, `data-available`. **Flag images** are referenced as SVG resources: ```html ``` Provide SVG flags in `Resources/Public/Icons/Flags/` named by the `flag` field of the language config (e.g. `gb.svg`, `de.svg`). --- ## 3. JavaScript Copy **`assets/language-preference.js`** into your extension's JS build. Include it after the DOM is available (e.g. at end of `` or as a module). ### What it does | Step | Description | |------|-------------| | Read data | Parses `.lang-menu__data` items into a structured array | | Cookie on click | Sets `lang_pref=` for 365 days when user clicks a language link | | Session guard | Skips auto-redirect if `sessionStorage.lang_redirected` is set (prevents redirect loops) | | Preferred lang | Uses `lang_pref` cookie first, then iterates `navigator.languages` to find a match | | Redirect | `window.location.replace(target.link)` — single redirect, no history entry | ### Cookie spec | Attribute | Value | |-----------|-------| | Name | `lang_pref` | | Value | hreflang code, e.g. `de-DE` | | Expires | 365 days | | Path | `/` | | SameSite | `Lax` | --- ## 4. LanguageMenu item properties Each item exposed by the `language-menu` processor: | Property | Type | Description | |----------|------|-------------| | `hreflang` | string | BCP-47 language tag, e.g. `de-DE` | | `navigationTitle` | string | Display name | | `link` | string | URL for this language version | | `active` | bool | Current language | | `available` | bool | Translation exists for current page | | `flag` | string | Flag identifier (from site config) | | `title` | string | Page title in that language | | `twoLetterIsoCode` | string | ISO 639-1 code | --- ## 5. CSS See `references/css-patterns.md` for the complete CSS reference. Structure uses BEM with `.lang-menu` block: `__trigger`, `__dropdown`, `__item`, `__link`, `__flag`, `__label`. --- ## References - **Fluid template**: `references/fluid-template.md` - **CSS patterns**: `references/css-patterns.md` - **JS asset**: `assets/language-preference.js` - [LanguageMenuProcessor reference](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/DataProcessing/LanguageMenuProcessor.html) - [Frontend Localization Guide](https://docs.typo3.org/m/typo3/guide-frontendlocalization/main/en-us/LanguageMenu/Index.html) ## Completion And Safety Keep the language menu usable without JavaScript and do not introduce automatic redirects without confirming the project's consent and locale policy. Complete only after the current language, unavailable translations, a first visit, a saved manual preference, and a no-JavaScript navigation path have all been tested without redirect loops.