TypoScript Navigation Menus
This tutorial is all about navigation menus in TYPO3, how are they done using TypoScript, types of navigations and their usage.
As in every other CMS system around also, TYPO3 offers a lot of facilities in creating navigation menus using TypoScript.
Below we are going to se how a simple menu navigation would be rendered by using TypoScript.
Let's take for example a navigation like this:
<ul class="level1">
<li>first level</li>
<li>first level
<ul class="level2">
<li>second level</li>
</ul>
</li>
<li>first level</li>
</ul>The respective TypoScript code to produce this navigation markup would be something like this:
lib.textmenu = HMENU
lib.textmenu {
# We define the first level as text menu.
1 = TMENU
# We define the normal state ("NO").
1.NO = 1
1.NO.allWrap = <li>|</li>
# We define the active state ("ACT").
1.ACT = 1
1.ACT.wrapItemAndSub = <li>|</li>
# Wrap the whole first level.
1.wrap = <ul class="level1">|</ul>
# The second and third level should be configured exactly
# the same way.
# In between the curly brackets, objects can be copied.
# With the dot "." we define that the object can be found
# in the brackets.
# With 2.wrap and 3.wrap we overwrite the wrap, which was
# copied from 1.wrap.
2 < .1
2.wrap = <ul class="level2">|</ul>
3 < .1
3.wrap = <ul class="level3">|</ul>
}As you can see TYPO3 used an object called "HMENU" where H stands for hierarchical.
The HMENU object allows us to create a diversity of menus.
The main properties are numbers and correspond to the menu level.
The TMENU object renders a menu level as text.
There also exists a GMENU object which renders a menu level using images generated on the fly. A different rendering can be chosen for each menu level.
On every menu level, we can configure various states for the single menu items – see menu items, e.g. NO for “normal”, ACT for “pages in the root line” (i.e. the current page, its parent, grandparent, and so forth) or CUR for “the current page”.
Breadcrumb Menu
According to Wikipedia:
A breadcrumb or breadcrumb trail is a graphical control element frequently used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites.
Breadcrumbs typically appear horizontally across the top of a Web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.[1] A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical icons.
A breadcrumb trail or path based on viewing history is typically rendered as follows :
Page viewed > Page viewed > Page viewed > Page viewed > Page currently being viewed
For instance, in this scenario, a website visitor views seven pages (note how the pages are tracked in order the user viewed them) :
Home page > Services > About Us > Home page > Latest Newsletter > Home page > Page
currently being viewed Typical breadcrumbs following a hierarchical structure are shown as follows:
Home page > Section page > Subsection page
A Typical TypoScript navigation in TYPO3 looks like this:
lib.breadcrumb=COA
lib.breadcrumb {
10 = HMENU
10 {
special = rootline
#special.range = 0|-1
# "not in menu pages" should show up in the breadcrumbs menu
includeNotInMenu = 1
1 = TMENU
1 {
noBlur = 1
# Current item should be unlinked
target = _self
wrap = <div class="menu_breadcrumb menu_ul"><ul> | </ul></div>
NO {
stdWrap.field = title
ATagTitle.field = nav_title // title
linkWrap = <li>|</li><li>></li>|*|<li>|</li><li>></li>|*|<li>|</li>
}
# Current menu item is unlinked
CUR = 1
CUR < .NO
}
}
}