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.

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.

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

It's possible to combine more than one filed from your page preferences. It's a good option to add subtitles into the menus.

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>
   }
}

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.

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
}

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.