Learn about the top 2016 CMS trends. Read on.


In the name of usability, it’s extremely important to keep website users informed of where they are. Frequently, breadcrumb navigation provides this “where am I” functionality. Alternately, you may use section headers above a sub-pages menu to do the same.

In the TypoScript that follows, lib.nav.sub.header creates a section header and lib.nav.sub combines it with a submenu.

Header and Menu TypoScript

lib.nav.sub.header = HMENU
lib.nav.sub.header {
	special = rootline
	special.range = 1|1
	wrap = <li id="title">|</li>
	1 = TMENU
	1 {
		NO {
			doNotLinkIt = 0
			ATagTitle.field = description // title
			stdWrap.htmlSpecialChars = 1
			# e.g. how to change the default link text
			# these are in order of precedence
			stdWrap.cObject = TEXT
			stdWrap.cObject.field = nav_title // subtitle // tx_seo_titletag // title
		}
	}
}

lib.nav.sub = COA
lib.nav.sub {
	wrap = <div id="submenu"><ul>|</ul></div>

	10 < lib.nav.sub.header
	
	20 = HMENU
	20 {
		entryLevel = 1
		1 = TMENU
		1 {
			NO {
				wrapItemAndSub = <li>|</li>
				ATagTitle.field = abstract // description // title
				stdWrap.htmlSpecialChars = 1
			}

			CUR < .NO
			CUR = 1
			CUR {
				wrapItemAndSub = <li id="active">|</li>
				doNotLinkIt = 1
			}
		}
		
		2 < .1
		2.wrap = <ul>|</ul>
		3 < .2
		4 < .2
	}
}

After putting the code above into your TYPO3 template Setup section, call lib.nav.sub in your TemplaVoila Data Structure XML or page cObject as needed.

Notes

  • lib.nav.sub.header.1.NO.stdWrap.cObject.field demonstrates how to change the default link text. These alternate fields listed, are in order of precedence. If there’s no nav_title, use subtitle; no subtitle, use tx_seo_titletag; and so on.
  • lib.nav.sub.20.1.NO.ATagTitle.field shows how to set your A tag title attribute using similar precedence rules as lib.nav.sub.header.1.NO.stdWrap.cObject.field.

References

Originally posted October 6, 2009. Revised.

Still stuck? Write us.