Language selection menu
To properly navigate a multilingual web site you probably want to have a language selection menu somewhere. This menu should show an entry for each possible, with variation of aspect depending on translation availability:
- Translation exists
- Translation exists - currently selected
- Missing translation
- Missing translation - currently selected
This kind of menu can be made by either using a LanguageMenuProcessor on a FLUIDTEMPLATE or using the HMENU content object with special type language.
LanguageMenuProcessor example
The Introduction Package comes with a text-based rendering of the language menu, located in the footer:
This is the corresponding TypoScript code, that sets up a
Language
on the page level:
page = PAGE
page {
10.dataProcessing {
40 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
40 {
languages = <insert language-id> or "auto"
as = languagenavigation
}
}
}
The value for languages
is a list of comma-separated language
IDs (for example: 0,1,2
) or auto
to load from
site configuration.
The menu is then passed as a hierarchical array to
Fluid in the variable {languagenavigation}
.
The Fluid template iterates through the array and creates the language links:
<f:if condition="{languagenavigation}">
<ul id="language_menu" class="language-menu">
<f:for each="{languagenavigation}" as="item">
<li class="{f:if(condition: item.active, then: 'active')} {f:if(condition: item.available, else: 'text-muted')}">
<f:if condition="{item.available}">
<f:then>
<a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}">
<span>{item.navigationTitle}</span>
</a>
</f:then>
<f:else>
<span>{item.navigationTitle}</span>
</f:else>
</f:if>
</li>
</f:for>
</ul>
</f:if>