TYPO3 Logo
TypoScript Reference
Release: main

Loading data.

  • Introduction
  • Using and setting TypoScript
    • Add TypoScript in the backend
    • Add TypoScript in your extension
    • Access TypoScript in an extension
    • Constants
    • The constant editor
    • Register
    • Debugging / analyzing
  • Simple data types
  • Top-level objects
    • CONFIG & config
    • constants
    • module
    • PAGE
      • PAGE Examples
    • plugin
    • temp, styles & lib
    • tt_*
    • resources
    • sitetitle
    • types
  • Content Objects (cObject)
    • Content objects (general information)
    • CASE
    • Content object array - COA, COA_INT
    • CONTENT
    • FILES
    • FLUIDTEMPLATE
      • dataProcessing
        • CommaSeparatedValueProcessor
        • DatabaseQueryProcessor
        • FilesProcessor
        • FlexFormProcessor
        • GalleryProcessor
        • LanguageMenuProcessor
        • MenuProcessor
        • SiteProcessor
        • SiteLanguageProcessor
        • SplitProcessor
        • Custom data processors
    • HMENU
      • Browse - previous and next links
      • Categories HMENU
      • Directory menu - menu of subpages
      • Keywords - menu of related pages
      • Language menu
      • List menu
      • Rootline - breadcrumb menu
      • Updated HMENU
      • Userfunction menu
    • IMAGE
    • IMG_RESOURCE
    • LOAD_REGISTER
    • RECORDS
    • RESTORE_REGISTER
    • SVG
    • TEXT
    • USER and USER_INT
  • MENU
    • TMENU
    • TMENUITEM
  • GIFBUILDER
    • GIFBUILDER
    • Object names in this section
    • Examples
    • NON-Gifbuilder Objects
  • Functions
    • cache
    • Calc
    • Data / getText
    • encapsLines
    • getEnv
    • HTMLparser
    • HTMLparser_tags
    • if
    • imageLinkWrap
    • imgResource
    • makelinks
    • numberFormat
    • numRows
    • optionSplit
    • parseFunc
    • replacement
    • round
    • select
    • split
    • stdWrap
    • strPad
    • tags
    • typolink
  • Conditions
  • Appendix A – PHP include scripts
  • Glossary
  • About This Manual
  • Sitemap
  • Index

PAGE CONTENTS

  • MenuProcessor
    • Options
    • Example: Two level menu of the web page
      • TypoScript
      • The Fluid template
      • Output
  1. Start
  2. Content Objects (cObject)
  3. FLUIDTEMPLATE
  4. dataProcessing
  5. MenuProcessor
View source How to edit Edit on GitHub

Display settings


Color scheme of code blocks:


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¶
Required

true

Type

int, stdWrap

Default

1

Example

5

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

expandAll¶
Required

true

Type

int, stdWrap

Default

1

Example

0

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

includeSpacer¶
Required

true

Type

int, stdWrap

Default

0

Example

1

Include pages with type "spacer".

titleField¶
Required

true

Type

int, stdWrap

Default

"nav_title // title"

Example

"subtitle"

Fields to be used as title.

as¶
Required

false

Type

string

Default

"menu"

Name for the variable in the Fluid template.

Attention

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
                }
            }
        }
    }
}

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

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.

../../../_images/MenuProcessor.png
  • Previous
  • Next
  • Home
  • Contact
  • Issues
  • Repository

Last updated: Feb 01, 2023 07:57

Last rendered: Feb 01, 2023 07:58

  • TYPO3 Theme 4.7.9
  • DRC v3.0.dev30
© Copyright since 2012 by the TYPO3 contributors
  • Legal Notice
  • Privacy Policy
  • Code of Conduct