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

Name	Type	Default
special.range	string /stdWrap
special.reverseOrder	boolean	`false`
special.targets.[level number]	boolean	`false`

special.range

Type: string /stdWrap
Syntax: [begin-level] | [end-level]
Example: Example: Skip the current page

[begin-level] | [end-level] are interpreted like the .entryLevel for an HMENU).

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]

Type: boolean
Default: false
Example: Example: Set targets for levels

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

Examples

Breadcrumb styled with Fluid

The following breadcrumb menu is created with the MenuProcessor, based on the HMENU. It is styled via Fluid:

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

// 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:

EXT:site_package/Resources/Private/Partials/Page/Navigation/Breadcrumb.html

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

EXT:site_package/Configuration/TypoScript/Menus/Setup/BreadcrumbLib.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

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

EXT:site_package/Configuration/TypoScript/setup.typoscript

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

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.

EXT:site_package/Configuration/TypoScript/setup.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>