---
title: "Rootline - breadcrumb menu"
manual: "TypoScript Explained"
version: "main"
permalink: "https://docs.typo3.org/permalink/t3tsref:hmenu-special-rootline@main"
source: "DataProcessing/MenuProcessor/Rootline.rst"
rendered: "2026-09-19T06:55:14+00:00"
---

# Rootline - breadcrumb menu {#hmenu-special-rootline}

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:

```none
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](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/MountPoints/Index.html#MountPoints) are supported.

-   [Properties](https://docs.typo3.org/permalink/t3tsref:properties@main)
-   [Examples](https://docs.typo3.org/permalink/t3tsref:examples@main)

## Properties {#hmenu-special-rootline-properties}

### special.range {#hmenu-special-rootline-range}

-   **special.range**

    -   *Type:* string /[stdWrap](https://docs.typo3.org/permalink/t3tsref:stdwrap@main)
    -   *Syntax:* `[begin-level] | [end-level]`
    -   *Example:* [Example: Skip the current page](https://docs.typo3.org/permalink/t3tsref:hmenu-special-rootline-range-example@main)

    `[begin-level] | [end-level]` are interpreted like the
    [.entryLevel](https://docs.typo3.org/permalink/t3tsref:hmenu-entrylevel@main) for an `HMENU`).

### special.reverseOrder {#hmenu-special-rootline-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\] {#hmenu-special-rootline-targets}

-   **special.targets.\[level number\]**

    -   *Type:* boolean
    -   *Default:* `false`
    -   *Example:* [Example: Set targets for levels](https://docs.typo3.org/permalink/t3tsref:hmenu-special-rootline-targets-example@main)

    For framesets. You can set a default target and a target for each
    level by using the level number as sub-property.

## Examples {#hmenu-special-rootline-examples}

### Breadcrumb styled with Fluid {#hmenu-special-rootline-breadcrumb}

The following breadcrumb menu is created with the
[MenuProcessor](https://docs.typo3.org/permalink/t3tsref:menuprocessor@main), based on the HMENU. It is styled via Fluid:

**EXT:site_package/Configuration/TypoScript/Menus/Setup/BreadcrumbDataProcessor.typoscript**

```typoscript
page {
  10 = FLUIDTEMPLATE
  10 {
    dataProcessing {
      1657927210 = menu
      1657927210 {
        special = rootline
        special.range = 0|-1
        includeNotInMenu = 0
        as = breadcrumb
      }
    }
  }
}

```

The following Fluid partial can be used to style the breadcrumb menu:

**EXT: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>

```

### Breadcrumb with pure TypoScript {#hmenu-special-rootline-breadcrumb-pure}

The following breadcrumb menu is styled with pure Typoscript:

**EXT:site_package/Configuration/TypoScript/Menus/Setup/BreadcrumbLib.typoscript**

```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>
  }
}

```

### Example: Skip the current page {#hmenu-special-rootline-range-example}

The following
example will start at level 1 and does not show the page the user is
currently on:

**EXT:site_package/Configuration/Sets/Main/setup.typoscript**

```typoscript
temp.breadcrumbs = HMENU
temp.breadcrumbs.special = rootline
temp.breadcrumbs.special.range = 1|-2
```

### Example: Set targets for levels {#hmenu-special-rootline-targets-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](https://docs.typo3.org/permalink/t3tsref:tmenu@main) property [target](https://docs.typo3.org/permalink/t3tsref:confval-menu-common-properties-target@main).

**EXT:site_package/Configuration/Sets/Main/setup.typoscript**

```typoscript
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>

```