{namespace neos=TYPO3\Neos\ViewHelpers}
<f:render section="itemList" arguments="{items: items, websiteName: websiteName}"/>

<f:section name="itemList">
    <nav class="navbar navbar-static-top navbar-default first-level-navigation" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">{f:if(condition:'{websiteName}', then:'{websiteName}', else:'TYPO3
                    Neos')}</a>
            </div>

            <div class="navbar-collapse navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <f:for each="{items}" as="item" iteration="menuItemIterator">

                        <f:if condition="{item.subItems}">
                            <f:then>
                                <li class="dropdown {item.state}">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{item.label} <b
                                            class="caret"></b></a>
                                    <f:render section="subList" arguments="{items: item.subItems}"/>
                                </li>
                            </f:then>
                            <f:else>
                                <li {f:if(condition:'{0: item.state} == {0: "current"}', then: 'class="active"')}>
                                <neos:link.node node="{item.node}" title="{item.node.properties.navigationTitle}">
                                    {item.label}
                                </neos:link.node>
                                </li>
                            </f:else>
                        </f:if>
                    </f:for>
                </ul>
            </div>
        </div>
    </nav>
</f:section>

<f:section name="subList">
    <ul class="dropdown-menu">
        <f:for each="{items}" as="item">
            <li class="{item.state}">
                <neos:link.node node="{item.node}">{item.label}</neos:link.node>
            </li>
        </f:for>
    </ul>
</f:section>