Rootline - breadcrumb menu¶
The path of pages from the current page to the root page of the page tree is called "rootline".
A rootline menu is a menu which shows you these pages one by one in their hierarchical order.
An HMENU with the property special = rootline creates
a rootline menu (also known as "breadcrumb trail") that could look like this:
Page level 1 > Page level 2 > Page level 3 > Current page
Such a click path facilitates the user's orientation on the website and makes navigation to a certain page level easier.
Note
Mount points are supported.
Properties¶
Property
special.range
Data type
string /stdWrap
Description
[begin-level] | [end-level] (same way as you reference the .entryLevel for an HMENU). The following example will start at level 1 and does not show the page the user is currently on:
temp.breadcrumbs = HMENU
temp.breadcrumbs.special = rootline
temp.breadcrumbs.special.range = 1|-2
Property
special.reverseOrder
Data type
boolean
Default
0 (false)
Description
If set to true, the order of the rootline menu elements will be reversed.
Property
special.targets.[level number]
Data type
string
Description
For framesets. You can set a default target and a target for each level by using the level number as sub-property.
Example:
Here the links to pages on level 3 will have target="page", while
all other levels will have target="_top" as defined for the
TMENU property target.
page.2 = HMENU
page.2.special = rootline
page.2.special.range = 1|-2
page.2.special.targets.3 = page
page.2.1 = TMENU
page.2.1.target = _top
page.2.1.wrap = <ol> | <ol>
page.2.1.NO.linkWrap = <li> | </li>
[tsref:(cObject).HMENU.special = rootline]
Examples¶
Breadcrumb styled with Fluid¶
The following breadcrumb menu is created with the MenuProcessor, based on the HMENU. It is styled via Fluid:
// include this breadcrumb menu in your Fluid template:
// <f:render partial="Page/Navigation/Breadcrumb" arguments="{_all}" />
page {
10 = FLUIDTEMPLATE
10 {
dataProcessing {
1657927210 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
1657927210 {
special = rootline
special.range = 0|-1
includeNotInMenu = 0
as = breadcrumb
}
}
}
}
The following Fluid partial can be used to style the breadcrumb menu:
<f:if condition="{breadcrumb}">
<ol class="breadcrumb">
<f:for each="{breadcrumb}" as="item">
<li class="breadcrumb-item{f:if(condition: item.current, then: ' active')}" >
<f:if condition="{item.current}">
<f:then>
<span class="breadcrumb-text">{item.title}</span>
</f:then>
<f:else>
<a class="breadcrumb-link" href="{item.link}" title="{item.title}">
<span class="breadcrumb-text">{item.title}</span>
</a>
</f:else>
</f:if>
</li>
</f:for>
</ol>
</f:if>
Breadcrumb with pure TypoScript¶
The following breadcrumb menu is styled with pure Typoscript:
// include this breadcrumb menu in your Fluid template:
// <f:cObject typoscriptObjectPath="lib.breadcrumb" />
lib.breadcrumb = HMENU
lib.breadcrumb {
wrap = <ul class="breadcrumb">|</ul>
special = rootline
special.range = 1|-1
// render the menu
1 = TMENU
1 {
NO.wrapItemAndSub = <li>|</li>
// render the current page without link and with additional classs
CUR = 1
CUR.doNotLinkIt = 1
CUR.wrapItemAndSub = <li class="active">|</li>
}
}