<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" data-namespace-typo3-fluid="true">

<f:for each="{nav}" as="navItem">
    <li class="nav-item nav-item--{v:format.sanitizeString(string: navItem.data.html_class)}{f:if(condition: navItem.active, then: ' active')}{f:if(condition: navItem.current, then: ' current')}{f:if(condition: navItem.children, then: ' parent')} ">
        <f:if condition="{navItem.children}">
            <f:then>
                <a class="nav-link nav-toggler collapsed" href="{navItem.link}" id="toggler-{v:format.sanitizeString(string: navItem.data.html_class)}" data-toggle="collapse" data-target="#collapse-{v:format.sanitizeString(string: navItem.data.html_class)}, .show" aria-expanded="false">{navItem.title -> f:format.htmlentitiesDecode()}</a>
                <f:render section="submenu" arguments="{submenu: navItem.children, dropdownToggler:navItem.data.html_class}"/>
            </f:then>
            <f:else>
                <a class="nav-link" href="{navItem.link}" role="menuitem">{navItem.title -> f:format.htmlentitiesDecode()}</a>
            </f:else>
        </f:if>
    </li>
</f:for>

<f:section name="submenu">
    <div class="sub-nav-panel collapse" id="collapse-{v:format.sanitizeString(string: dropdownToggler)}" aria-labelledby="toggler-{v:format.sanitizeString(string: dropdownToggler)}">
        <ul class="sub-nav">
            <f:for each="{submenu}" as="subItem">
                <li class="sub-item sub-item--{v:format.sanitizeString(string: subItem.data.uid)}{f:if(condition: subItem.active, then: ' active')}{f:if(condition: subItem.current, then: ' current')}{f:if(condition: subItem.children, then: ' parent')} ">
                    <a class="nav-link" href="{subItem.link}" title="{f:if(condition: subItem.data.abstract, then: subItem.data.abstract, else: subItem.data.description)}" data-uid="{subItem.data.uid}" role="menuitem">{subItem.title-> f:format.htmlentitiesDecode()}</a>

                </li>
            </f:for>
        </ul>
    </div>
</f:section>
