<ul class="nav nav-modules" data-role="modulemenu" id="menu">
	<f:for each="{modules}" as="mainModule">
		<li class="modulemenu-group expanded" id="{mainModule.name}" data-modulename="{mainModule.name}" data-navigationcomponentid="{mainModule.navigationComponentId}" data-navigationframescript="{mainModule.navigationFrameScript}" data-navigationframescriptparameters="{mainModule.navigationFrameScriptParameters}">
			<div class="modulemenu-group-header">
				<span class="modulemenu-icon modulemenu-group-icon">
						<f:if condition="{mainModule.icon}">
							<f:then>
								<f:format.raw>{mainModule.icon}</f:format.raw>
							</f:then>
							<f:else>
								<core:icon identifier="actions-move-move" size="default" alternativeMarkupIdentifier="inline" />
							</f:else>
						</f:if>
				</span>
				<span class="modulemenu-group-title">
					{mainModule.title} <span class="caret"></span>
				</span>
			</div>
			<ul class="modulemenu-group-container">
				<f:for each="{mainModule.children}" as="subModule">
					<li id="{subModule.name}" class="modulemenu-item t3js-mainmodule" data-modulename="{mainModule.name}" data-navigationcomponentid="{subModule.navigationComponentId}" data-navigationframescript="{subModule.navigationFrameScript}" data-navigationframescriptparameters="{subModule.navigationFrameScriptParameters}">
						<a href="#" data-link="{subModule.link}" class="modulemenu-item-link" title="{subModule.description}">
							<span class="modulemenu-icon modulemenu-item-icon">
                                <f:format.raw>{subModule.icon}</f:format.raw>
							</span>
							<span class="modulemenu-item-title">
								{subModule.title}
							</span>
						</a>
					</li>
				</f:for>
			</ul>
		</li>
	</f:for>
</ul>
