Setzt man in TYPO3 auf dem Bootstrap Introduction Package auf und möchte das Hauptmenü erweitern, um 3 Ebenen statt den initial vorhandenen 2 Ebenen anzeigen zu lassen, müssen im Grunde nur 2 Stellen angepasst werden. Zuerst stellt man in der setup.txt (welche wir finden in \typo3conf\ext\bootstrap_package\Configuration\TypoScript\setup.txt) sicher, dass wir ausreichend Level zur Verfügung haben, die wir anzeigen lassen können, der MenuProcessor also weiß, wieviele Ebenen dieser ausliefern soll. Danach müssen wir dann in der entsprechenden Template-Datei das Menü in der gewünschten Weise erweitern. Diese Main.html finden wir unter \typo3conf\ext\bootstrap_package\Resources\Private\Partials\Page\Navigation\.
Aber zuerst die setup.txt. Hier ersetzen / erweitern wir die Zeilen
##########################
### DATA PREPROCESSING ###
##########################
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
entryLevel = 0
levels = 2
includeSpacer = 1
as = mainnavigation
beispielsweise mit
##########################
### DATA PREPROCESSING ###
##########################
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
entryLevel = 0
levels = 88
expandAll = 1
includeSpacer = 1
as = mainnavigation
Nun zur Main.html: Möchten wir erreichen, dass die zweite und dritte Ebenen bei einem Klick auf einen Menüpunkt der ersten Ebene erscheinen, reicht es aus, den Inhalt der folgenden if-Bedingung:
<f:if condition="{mainnavigation}">
</f:if>
so zu gestalten (ohne Newlines und Absätze, da für die Darstellung hier zu verschachtelt):
<f:if condition="{mainnavigation}">
<nav class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav navbar-main">
<f:for each="{mainnavigationlala}" as="mainnavigationItem">
<li class="{f:if(condition: mainnavigationItem.active, then:'active')} {f:if(condition: mainnavigationItem.children, then:'dropdown')}">
<f:if condition="{mainnavigationItem.spacer}">
<f:then>
<p class="navbar-text">{mainnavigationItem.title}</p>
</f:then>
<f:else>
<f:if condition="{mainnavigationItem.children}">
<f:then>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>{mainnavigationItem.title}</span>
<b class="caret"></b>
<span class="bar"></span>
</a>
<ul class="dropdown-menu">
<f:for each="{mainnavigationItem.children}" as="child">
<li class="{f:if(condition: child.active, then:'active')} {f:if(condition: child.children, then:'dropdown')}">
<f:if condition="{child.spacer}">
<f:then>
<p class="navbar-text">{child.title}</p>
</f:then>
<f:else>
<f:if condition="{child.children}">
<f:then>
<span>{mainnavigationItem.title}</span>
<b class="caret"></b>
<span class="bar"></span>
<ul>
<f:for each="{child.children}" as="grandchild">
<f:if condition="{grandchild.spacer}">
<f:then>
<p class="navbar-text">{grandchild.title}</p>
</f:then>
<f:else>
<a href="/{grandchild.link}" target="{grandchild.target}" title="{grandchild.title}">
<span>{grandchild.title}</span>
<span class="bar"></span>
</a>
</f:else>
</f:if>
</f:for>
</ul>
</f:then>
<f:else>
<a href="/{child.link}" target="{child.target}" title="{child.title}">
<span>{child.title}</span>
<span class="bar"></span>
</a>
</f:else>
</f:if>
</f:else>
</f:if>
</f:for>
</ul>
</f:then>
<f:else>
<a href="/{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">
<span>{mainnavigationItem.title}</span>
<span class="bar"></span>
</a>
</f:else>
</f:if>
</f:else>
</f:if>
</li>
</f:for>
</ul>
</nav>
</f:if>
Jetzt haben wir ein schönes Menü mit drei Ebenen und können dies nach Belieben stylen. Umgesetzt in TYPO3 8.7.1.