Attention

TYPO3 v9 has reached its end-of-life September 30th, 2021 and is not maintained by the community anymore. Looking for a stable version? Use the version switch on the top left.

You can order Extended Long Term Support (ELTS) here: TYPO3 ELTS.

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, i.e.:

  • Translation exists

  • Translation exists - currently selected

  • Missing translation

  • Missing translation - currently selected

This kind of menu can be made by TypoScript and the HMENU content object with special type language.

Such a menu answers to the above requirements by using four different item states, respectively "NO", "ACT", "USERDEF1" and "USERDEF2".

TMENU example

The Introduction Package comes with a text-based rendering of the language menu, located in the footer.

Text-based language menu

A text-based language menu, with active and disabled states

This is the corresponding code:

lib.language = COA
lib.language {
    20 = HMENU
    20 {
        special = language
        special.value = 0,1,2
        special.normalWhenNoLanguage = 0
        wrap =
        1 = TMENU
        1 {
            noBlur = 1
            NO = 1
            NO {
                doNotLinkIt = 1
                linkWrap = <li>|</li>
                stdWrap.override = English || Deutsch || Dansk
                stdWrap {
                    typolink {
                        parameter.data = page:uid
                        additionalParams = &L=0 || &L=1 || &L=2
                        ATagParams = hreflang="en-GB" || hreflang="de-DE" || hreflang="da-DK"
                        addQueryString = 1
                        addQueryString.exclude = L,id,no_cache
                        addQueryString.method = GET
                        no_cache = 0
                    }
                }
            }
            ACT < .NO
            ACT.linkWrap = <li class="active">|</li>
            USERDEF1 < .NO
            USERDEF1 {
                linkWrap = <li class="text-muted">|</li>
                stdWrap.typolink >
            }
            USERDEF2 < .ACT
            USERDEF2 {
                linkWrap = <li class="text-muted">|</li>
                stdWrap.typolink >
            }
        }
    }
    wrap = <ul id="language_menu" class="language-menu">|</ul>
}

Hint

Having "Page not found (404) trouble?"

The reason may be a 'cHash' problem. See if you can find help in this discussion. Check whether you have 'cHash' in line addQueryString.exclude = L,id,no_cache above.

GMENU example

It is also possible to go for a graphical rendering, with the GMENU object, for example to create a menu based on flag icons. For this, we need to replace the existing code with something like:

lib.language.20 >
lib.language.20 = HMENU
lib.language.20 {
   special = language
   special.value = 0,1,2
   special.normalWhenNoLanguage = 0
   1 = GMENU
   1.NO {
       XY = [5.w]+4, [5.h]+4
       backColor = black
       5 = IMAGE
       5.file = fileadmin/flags/gb.png  || fileadmin/flags/de.png  || fileadmin/flags/dk.png
       5.offset = 2,2
   }
   1.ACT < .1.NO
   1.ACT = 1
   1.ACT.backColor = white

   1.USERDEF1 < .1.NO
   1.USERDEF1 = 1
   1.USERDEF1.backColor = gray
   1.USERDEF1.10 = EFFECT
   1.USERDEF1.10.value = gray
   1.USERDEF1.noLink = 0

   1.USERDEF2 < .1.USERDEF1
   1.USERDEF2.backColor = green
}

which will result in:

Graphical language menu

A graphical language menu, with active and disabled states