Rendering manual menus with VHS

Menu.html

<div xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<!-- By setting the "as" argument, we create a new variable accessible inside tag content -->
<v:page.menu as="myMenuVariable">
	<ol class="mySpecialMenu">
		<f:for each="{myMenuVariable}" as="menuPage">
			<li>
				<!-- A few key properties are added on {menuPage} for user friendliness -->
				<!-- These are: "linktext", "link", "active", "current", "hasSubPages" -->
				<f:if condition="{menuPage.current}">
					<f:then>
						<!-- Special rendering of "current" page title as raw text -->
						{menuPage.linktext}
						<!-- And with a conditional next level menu using auto rendering: -->
						<v:variable.set name="hasSub" value="{v:condition.page.hasSubpages(then: 'TRUE', else: 'FALSE', pageUid: '{item.uid}', includeHidden: 0, showHiddenInMenu: 0)}" />
						<f:if condition="{hasSub} =='TRUE' ">
							<v:page.menu pageUid="{menuPage.uid}" />	
						</f:if>
					</f:then>
					<f:else>
						<!-- There are two common methods of rendering the page links: -->
						<!-- Using f:link.page which will re-create the "link" HREF -->
						<f:link.page pageUid="{menuPage.uid}" class="{menuPage.class}">{menuPage.linktext}</f:link.page>
						<!-- Or with manual link tags using pre-built "link" HREF -->
						<a href="{menuPage.link}" class="{menuPage.class}">{menuPage.linktext}</a>
					</f:else>
				</f:if>
			</li>
		</f:for>
	</ol>
</v:page>
<!-- Note that the {myMenuVariable} no longer exists since the variables are cleaned after tag finishes -->
</div>