Skip to content

TYPO3 menu - Add link to home

There are a couple of ways to add a "home-link" to your main menu. This article shows some possibilities and looks at pros and cons.

 

"There should be a home-link as first menu point".

We encounter this requirement for nearly every project. Still there is no perfect and easy way to achieve that with TYPO3 CMS.

Typically a page tree will look like one of the variants shown in the image. By convention the home-page of a website is always reachable by using the plain domain name of the site, e.g. http://example.com/. This structure is reflected in the depicted page trees, where the site-root is always the home-page. All sub-pages are children of the home-page and are usually accessible by appending a path to the domain, e.g. http://example.com/about/.
(In TYPO3 CMS you need to use a url-rewriting extension, like realUrl or coolUri, to achieve that.)

Menus in TYPO3 are usually generated using one of the menu content objects in TypoScript. I'll stick to HMENU and TMENU in this article. The HMENU object allows to render a flat list of links per page-tree level, where each level is rendered by a TMENU object.

In order to render the intended menu (including the home-link) for Tree 3, we can use the straight forward and easy TypoScript

lib.menu = HMENU
lib.menu {
 entryLevel = 0
 wrap = <ul>|</ul>

 1 = TMENU
 1 {
 NO = 1
 NO.stdWrap.htmlSpecialChars = 1
 NO.wrapItemAndSub = <li>|</li>

 CUR < .NO
 CUR.wrapItemAndSub = <li class="active">|</li>
 CUR.linkWrap = |<span class="sr-only"> (current)</span>
 }
}

This setup works great, but has one nasty side-effect: Your home-page is not really located at the document root of your website anymore. Accessing http://example.com/ will redirect(!) you to http://example.com/home/. This is usually not what you want.

 

For Tree 2 you can use the same setup as for Tree 3. This time your home-page is in the document root, but you have another drawback: The link to the home-page never gets an active-state. This might be confusing for the user of the website, as for all other pages the current menu item will be highlighted, but the home-link will never be. This can be seen as a bug of the TYPO3 CMS Core as it does not follow a shortcut to its destination, hence it does not detect properly that the home-link should actually be "current", when being on the home-page.

 

Tree 1 lacks any kind of special page for generating the home-link. In this case we need to use the power of TypoScript to create this virtual menu item. This is slightly more involved for the integrator, but the easiest to grasp for the editors. The trick is to prepend the home-link to the menu using stdWrap.

lib.menu = HMENU
lib.menu {
 entryLevel = 0
 wrap = <ul>|</ul>

 # prepend link to home
 stdWrap.prepend = TEXT
 stdWrap.prepend {
 htmlSpecialChars = 1
 data = leveltitle:0
 typolink.parameter.data = leveluid:0
 
 wrap = <li>|</li>
 wrap.override = <li class="active">|<span class="sr-only"> (current)</span></li>
 wrap.override {
 	if.value.data = leveluid:0
 	if.equals.data = TSFE:id
 }
 }

 1 = TMENU
 1 {
 NO = 1
 NO.stdWrap.htmlSpecialChars = 1
 NO.wrapItemAndSub = <li>|</li>

 CUR < .NO
 CUR.wrapItemAndSub = <li class="active">|</li>
 CUR.linkWrap = |<span class="sr-only"> (current)</span>
 }
}

The new TypoScript leverages the data property to find the home page and uses an override to mark it as active. Note that we do not care about ACT and *IFSUB for the home page as this would not make any sense to highlight the menu item in those cases.

I consider the last implementation the best, since it

  • has no overhead with artificial shortcut pages
  • keeps the root page accessible in the document root
  • works with translations as well
  • properly deals with the CUR state.

There is only one tiny disadvantage of this approach. You can't place the link to the home-page at an arbitrary place in the menu, it has to be the first (or the last).

 

This information applies to TYPO3 CMS 6.2 and 7.4

Back