ot_typo3/ot_templating/Resources/Private/Partials/Menu.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ot=Opentalent\OtTemplating\ViewHelpers}

<f:comment><!--
    -- MenuViewHelper  --
    Voir: https://fluidtypo3.org/viewhelpers/vhs/master/MenuViewHelper.html
--></f:comment>

<f:comment><!--Navbar: Menu de premier niveau.
           Si les items ont des sous-pages, on leur donne la classe dropdown--></f:comment>
<v:menu as="mainMenu" classHasSubpages="dropdown" pageUid="{ot:rootPage.getId()}">

    <ul id="menu">
        <f:for each="{mainMenu}" as="mainMenuItem">

            <li class="{mainMenuItem.class}">

                <f:link.page pageUid="{mainMenuItem.uid}" title="{mainMenuItem.linktext}">
                    {mainMenuItem.linktext}
                    <f:if condition="{mainMenuItem.hasSubPages}">
                        <i class="caret fa fa-caret-down"></i>
                    </f:if>
                </f:link.page>

                <f:comment><!--Si la page a des sous-pages: menu de second niveau--></f:comment>
                <f:if condition="{mainMenuItem.hasSubPages}">
                    <ul class="dropdown-menu">
                        <v:menu as="subMenu" pageUid="{mainMenuItem.uid}" classHasSubpages="dropdown">

                            <f:for each="{subMenu}" as="subMenuItem">

                                <li class="{subMenuItem.class}">
                                    <f:link.page pageUid="{subMenuItem.uid}" title="{subMenuItem.linktext}">
                                        {subMenuItem.title}

                                        <f:if condition="{subMenuItem.hasSubPages}">
                                            <i class="caret fa fa-caret-right"></i>
                                        </f:if>
                                    </f:link.page>

                                    <f:comment><!--Si la page a des sous-pages: menu de troisième niveau--></f:comment>
                                    <f:if condition="{subMenuItem.hasSubPages}">

                                        <v:menu as="thirdmenu" class="dropdown-menu" pageUid="{subMenuItem.uid}" >

                                            <f:for each="{thirdLevelMenu}" as="thirdLevelMenuItem">
                                                <li class="{thirdLevelMenuItem.class}">
                                                    <f:link.page pageUid="{thirdLevelMenuItem.uid}" title="{thirdLevelMenuItem.linktext}">
                                                        {thirdLevelMenuItem.title}
                                                    </f:link.page>
                                                </li>
                                            </f:for>

                                        </v:menu>

                                    </f:if>
                                </li>
                            </f:for>
                        </v:menu>
                    </ul>
                </f:if>
            </li>
        </f:for>
    </ul>
</v:menu>