TypoScript: Mastering navigation menus
Probably most powerful tool wehen it comes to building the navigation menus. Let's see what can we do with that HMENU.
Simple one level menu with .first and .last classes
It's very common that you need different wrapping for the first and last element in your navigation menu. TypoScript wrap makes it really simple.
TypoScript setup
lib.mainNavi = HMENU lib.mainNavi { entryLevel = 0 1 = TMENU 1 { # wrap whole menu into <ul> list wrap = <ul id="mainNavi">|</ul> # normal menu items NO { # for security concerne not to parse html from the field stdWrap.htmlSpecialChars = 1 # wrap each menu item into <li> wrap = <li class="first">|</li>|*|<li>|</li>|*|<li class="last">|</li> } # include settings from NO into CUR CUR < .NO # currently selected menu item CUR = 1 CUR { wrap = <li class="first cur">|</li>|*|<li class="cur">|</li>|*|<li class="last cur">|</li> # adds class="cur" to menu link tag ATagParams = class="cur" } } }
Menu that uses more than just navigation title
It's possible to combine more than one filed from your page preferences. It's a good option to add subtitles into the menus.
TypoScript setup
lib.MAINMENU = HMENU lib.MAINMENU { entryLevel = 0 1 = TMENU 1 { wrap = <ul class="mainNavi">|</ul> NO { allWrap = <li>|</li> stdWrap.htmlSpecialChars = 1 stdWrap.cObject = COA stdWrap.cObject { # getting the navigation title with fallback to the title 10 = TEXT 10.field = nav_title // title 10.wrap = <span class="pageTitle">|</span><br /> # getting the subtitle of the page 20 = TEXT 20.field = subtitle 20.wrap = <span class="subTitle">|</span> } } # using ACT to set active list element class # in case the page or one of its subpages is open ACT < .NO ACT = 1 ACT.allWrap = <li class="act">|</li> } }
Multilevel sub-menu
If you need a sidebar sub-menu it's the base you can play with. Here's a XHTML 1.0 valid 3 level navigation menu.
TypoScript setup
lib.subNavi = HMENU lib.subNavi { # setting one level down from root entryLevel = 1 # options for first level 1 = TMENU 1 { # use expAll to expand all submenus expAll = 1 wrap = <ul class="subNavi">|</ul> NO { wrapItemAndSub = <li>|</li> } CUR < .NO CUR = 1 CUR { # disable link to current page doNotLinkIt = 1 allWrap = <span class="current-text">|</span> } # if current page has sub-pages CURIFSUB = 1 CURIFSUB { wrapItemAndSub = <li class="current-withsub">|</li> doNotLinkIt = 1 allWrap = <span class="current-text">|</span> } ACT = 1 ACT { wrapItemAndSub = <li>|</li> ATagParams = class="lmenu act" } } # settings for second level 2 = TMENU 2 { wrap = <ul class="subSubNavi">|</ul> NO { wrapItemAndSub = <li>|</li> ATagParams = class="subSubLink" } CUR < .NO CUR = 1 CUR { doNotLinkIt = 1 } } # third level with same options as second 3 < .2 }
Documentation
That should cover most basic menus in TYPO3 template building. Check the documentation at to find out how to exclude pages by ID, or how to build a menu from a sub-part of a page tree and for more examples.