Code example
Shows how to manually loop and render pages using v:page.menu instead of the built-in rendering which can only be affected in key aspects like class names. Includes a demonstration and small explanation of special properties which are added to each page's data, containing a pre-built link, link text and link tag CSS class name.
- Description
- Rendering manual menus with VHS
- Author
- NamelessCoder
- Creation date
- Extensions
- FluidTYPO3.Fluidpages FluidTYPO3.Vhs
- Tags
- Pages ViewHelpers
- Files
- Menu.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |