Rootline - breadcrumb menu¶
The path of pages from the current page to the root page of the page tree is called "rootline".
A root line 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 root line menu (also known as "breadcrumb trail") that could look like this:
Page level 1 > Page level 2 > Page level 3 > Current pageSuch 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¶
special.range¶
-
special.range¶ -
- Type
- string /stdWrap
- Syntax
[begin-level] | [end-level]
[begin-level] | [end-level]are interpreted like the .entryLevel for anHMENU).
Example: Skip the current page¶
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|-2special.reverseOrder¶
-
special.reverseOrder¶ -
- Type
- boolean
- Default
false
If set to true, the order of the root line menu elements will be reversed.
special.targets.[level number]¶
-
special.targets.[level number]¶ -
- Type
- boolean
- Default
false
For framesets. You can set a default target and a target for each level by using the level number as sub-property.
Example: Set targets for levels¶
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>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>
}
}