Breadcrumb / rootline navigation in TYPO3
If you use a Generated site package it already contains a breadcrumb navigation on the subpages.
To display a breadcrumb the menu data processor can be used with the special type Rootline.
Breadcrumb TypoScript - the data processor
page {
10 {
dataProcessing {
30 = menu
30 {
special = rootline
special.range = 0|-1
as = breadcrumb
}
}
}
}
Line 4: Each data processor must have a unique id. We used 10 for the page-content data processor and 20 for the Main menu therefore we now use 30.
Line 6: We configure the menu to use the special type Rootline.
Line 7: We use the property special.range to define that the breadcrumb should start at the root level (0) of the site and include the level of the current page (-1).
Line 8: As the default variable of the menu data processor menu is already in
use for the main menu, we rename the variable to be used for the breadcrumb to
breadcrumb.
Breadcrumb navigation Fluid template
The special type breadcrumb delivers the items of the rootline as an array.
Therefore we can use the For ViewHelper <f:for>
to loop through these elements:
<f:if condition="{breadcrumb}">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary">
<f:for each="{breadcrumb}" as="item">
<f:if condition="{item.current}">
<f:then>
<li class="breadcrumb-item active" aria-current="page">{item.title}</li>
</f:then>
<f:else>
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="{item.link}" title="{item.title}">
<span class="breadcrumb-text">{item.title}</span>
</a>
</li>
</f:else>
</f:if>
</f:for>
</ol>
</nav>
</div>
</f:if>
Line 1, 5: The data of the breadcrumb navigation can be found in variable
{breadcrumb}. We defined this in line 8 of the TypoScript.
Line 6: As all items in the breadcrumb navigation are in the rootline of the
current page all are marked as active. We therefore check if the page of the
entry to be displayed is the current page.