menu data processor
The \TYPO3\,
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\ and
\B13\.
Refer to the manual of the extension b13/menus for more information.
Options
levels
expandAll
includeSpacer
titleField
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.
Using the Menu the following scenario is possible:
tt_content {
examples_dataprocmenu =< lib.contentElement
examples_dataprocmenu {
templateName = DataProcMenu
dataProcessing.10 = menu
dataProcessing.10 {
levels = 2
as = headerMenu
expandAll = 1
includeSpacer = 1
titleField = nav_title // title
dataProcessing {
10 = files
10 {
references.fieldName = media
}
}
}
}
}This generated menu can be used in Fluid like this:
<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>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.
