---
title: "Breadcrumb / rootline navigation in TYPO3"
manual: "Site Package Tutorial"
version: "main"
permalink: "https://docs.typo3.org/permalink/t3sitepackage:breadcrumb@main"
source: "Menu/Breadcrumb.rst"
rendered: "2026-09-24T15:01:46+00:00"
---

# Breadcrumb / rootline navigation in TYPO3 {#breadcrumb}

If you use a [Generated site package](https://docs.typo3.org/permalink/t3sitepackage:minimal-design@main)
it already contains a breadcrumb navigation on the subpages.

To display a breadcrumb the [menu data processor](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/DataProcessing/MenuProcessor/Index.html#MenuProcessor)
can be used with the special type [Rootline](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/DataProcessing/MenuProcessor/Rootline.html#hmenu-special-rootline).

## Breadcrumb TypoScript - the data processor {#breadcrumb-typoscript}

**packages/my_site_package/Configuration/Sets/SitePackage/TypoScript/Navigation/breadcrumb.typoscript**

```typoscript
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](https://docs.typo3.org/permalink/t3sitepackage:page-content-data-processor@main)
and 20 for the [Main menu](https://docs.typo3.org/permalink/t3sitepackage:main-menu-creation@main) therefore we now use 30.

Line 6: We configure the menu to use the special type
[Rootline](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/DataProcessing/MenuProcessor/Rootline.html#hmenu-special-rootline).

Line 7: We use the property [special.range](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/DataProcessing/MenuProcessor/Rootline.html#confval-hmenu-rootline-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 {#breadcrumb-fluid}

The special type `breadcrumb` delivers the items of the rootline as an array.
Therefore we can use the [For ViewHelper \<f:for>](https://docs.typo3.org/other/typo3/view-helper-reference/main/en-us/Global/For.html#typo3fluid-fluid-for)
to loop through these elements:

**packages/my_site_package/Resources/Private/Templates/Partials/Navigation/Breadcrumb.fluid.html**

```html
<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](https://docs.typo3.org/permalink/t3sitepackage:breadcrumb-typoscript@main).

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.