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: -->
						<f:if condition="{menuPage.hasSubPages}">
							<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>

Just noticed an error in the closing </v:page>. Should be </v:page.menu>.
Also, I would comment out one of the two ways to render the page links. The double rendering of page links was confusing to me at first.

Just a comment for more recent versions of VHS

1. v:page.menu is deprecated so use v:menu
2. hasSubPage no longer works like it used so here an alternative...

In place of

<f:if condition="{menuPage.hasSubPages}">

Instead now use...

<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' ">

(I found this info from a comment by Rob De Vries in the #fluidtypo3 channel in TYPO3's Slack)