`menu` data processor

New in version 12.1

One can use the alias menu instead of the fully-qualified class name \TYPO3\CMS\Frontend\DataProcessing\MenuProcessor.

The \TYPO3\CMS\Frontend\DataProcessing\MenuProcessor, alias menu, 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.

Table of contents

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

Name	Type	Default
levels	integer / stdWrap	1
expandAll	boolean / stdWrap	1
includeSpacer	boolean / stdWrap	0
titleField	string / stdWrap	"nav_title // title"
as	string	"menu"

levels

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

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

expandAll

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

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

includeSpacer

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

Include pages with type "spacer".

titleField

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

Fields to be used as title.

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
        # Before TYPO3 v12.1 you have to specify the fully-qualified class name of the processor
        # dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        # Since TYPO3 v12.1 one can also use the available alias
        dataProcessing.10 = menu
        dataProcessing.10 {
            levels = 2
            as = headerMenu
            expandAll = 1
            includeSpacer = 1
            titleField = nav_title // title
            dataProcessing {
                # Before TYPO3 v12.1 you have to specify the fully-qualified class name of the processor
                # dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                # Since TYPO3 v12.1 one can also use the available alias
                10 = files
                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.hasSubpages, then: 'dropdown')}">
            <f:if condition="{menuItem.hasSubpages}">
               <f:then>
                  <!-- Item has children -->
                  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" 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.data.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}" 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.

menu data processor

Options

levels

expandAll

includeSpacer

titleField

as

Example: Two level menu of the web page

`menu` data processor