Customize your language menu with Typo3 and Fluid

Customize your language menu with Typo3 and Fluid

Using Typo3 and Fluid you can render language menus utilizing the v:page.languageMenu view helper like this without typoscript:
<v:page.languageMenu />

However, did you know that you can also customize the complete markup by using a for loop? Check out this Bulma example:

<div class="navbar-start">
  <v:page.languageMenu  tagName="ul" tagNameChildren="li" defaultLanguageLabel="English" hideNotTranslated="1" layout="flag,name">
    <f:for each="{languageMenu}" as="item">
      <f:comment><f:debug title="item">{item}</f:debug></f:comment>
      <a class="navbar-item {f:if(condition: '{item.current}', then: 'is-active',  else:'')}" href="{item.url}">
        {item.label}
      </a>
    </f:for>
  </v:page.languageMenu>
</div>

Have you noticed the f:debug statement? Uncomment it by removing the f:comment tags to get a full list of supportet item attributes.

Read more about the languageMenu view helper at fluidtypo3.org