Attention

TYPO3 v11 has reached end-of-life as of October 31th 2024 and is no longer being maintained. Use the version switcher on the top left of this page to select documentation for a supported version of TYPO3.

Need more time before upgrading? You can purchase Extended Long Term Support (ELTS) for TYPO3 v10 here: TYPO3 ELTS.

MenuProcessor

The MenuProcessor utilizes HMENU to generate a list of menu items which can be assigned to FLUIDTEMPLATE as a variable.

Additional data processing is supported and will be applied to each record.

Hint

The third party extension b13/menus also provides menu processors like \B13\Menus\DataProcessing\TreeMenu and \B13\Menus\DataProcessing\BreadcrumbsMenu.

Refer to the manual of the extension b13/menus for more information.

Options

levels

levels

Type: integer / stdWrap
Required: true
Default: 1
Example: 5

Maximal number of levels to be included in the output array.

expandAll

expandAll

Type: boolean / stdWrap
Required: true
Default: 1
Example: 0

Include all submenus (1) or only those of the active pages (0).

includeSpacer

includeSpacer

Type: boolean / stdWrap
Required: true
Default: 0
Example: 1

Include pages with type "spacer".

titleField

titleField

Type: string / stdWrap
Required: true
Default: "nav_title // title"
Example: "subtitle"

Fields to be used as title.

as

as

Type: string
Required: false
Default: "menu"

Name for the variable in the Fluid template.

Hint

Additionally, all HMENU options are available.

Example: Two level menu of the web page

Please see also About the examples.

TypoScript

Using the MenuProcessor the following scenario is possible:

        EXT:examples/Configuration/TypoScript/DataProcessors/Processors/MenuProcessor.typoscript
    

tt_content {
   examples_dataprocmenu =< lib.contentElement
   examples_dataprocmenu {
      templateName = DataProcMenu
      dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      dataProcessing.10 {
         levels = 2
         as = headerMenu
         expandAll = 1
         includeSpacer = 1
         titleField = nav_title // title
         dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
               references.fieldName = media
            }
         }
      }
   }
}

The Fluid template

This generated menu can be used in Fluid like this:

EXT:examples/Resources/Private/Templates/ContentElements/DataProcMenu.html

<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
   <h2>Data in variable headerMenu</h2>
   <f:debug inline="true">{headerMenu}</f:debug>

   <h2>Output</h2>
   <ul class="nav nav-pills">
      <f:for each="{headerMenu}" as="menuItem">
         <li class="nav-item {f:if(condition:'{menuItem.children}',then:'dropdown')}">
            <f:if condition="{menuItem.children}">
               <f:then>
                  <!-- Item has children -->
                  <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                     aria-haspopup="true" aria-expanded="false">
                     <f:if condition="{menuItem.files}">
                        <f:image image="{menuItem.files.0}" class="" width="20"/>
                     </f:if>
                     {menuItem.title}</a>
                  <div class="dropdown-menu">
                     <f:for each="{menuItem.children}" as="menuItemLevel2">
                        <f:if condition="{menuItemLevel2.spacer}">
                           <f:then><div class="dropdown-divider"></div></f:then>
                           <f:else>
                              <f:link.page pageUid="{menuItemLevel2.uid}"
                                           class="dropdown-item {f:if(condition:'{menuItemLevel2.active}',then:'active')}">
                                 {menuItemLevel2.title}
                              </f:link.page>
                           </f:else>
                        </f:if>
                     </f:for>
                  </div>
               </f:then>
               <f:else>
                  <!-- Item has no children -->
                  <f:link.page pageUid="{menuItem.data.uid}"  class="nav-link {f:if(condition:'{menuItem.active}',then:'active')}">
                     <f:if condition="{menuItem.files}">
                        <f:image image="{menuItem.files.0}" class="" width="20"/>
                     </f:if>
                     {menuItem.title}
                  </f:link.page>
               </f:else>
            </f:if>
         </li>
      </f:for>
   </ul>

</html>

Output

The array now contains the menu items on level one. Each item in return has the menu items of level 2 in an array called children.