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

Such a click path facilitates the user's orientation on the website and makes navigation to a certain page level easier.

Properties 

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

special.range 

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 

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
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 
page {
  10 = FLUIDTEMPLATE
  10 {
    dataProcessing {
      1657927210 = menu
      1657927210 {
        special = rootline
        special.range = 0|-1
        includeNotInMenu = 0
        as = breadcrumb
      }
    }
  }
}
Copied!

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

EXT:site_package/Resources/Private/Templates/Partials/Navigation/Breadcrumb.fluid.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>
Copied!

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>
  }
}
Copied!

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/Sets/Main/setup.typoscript 
temp.breadcrumbs = HMENU
temp.breadcrumbs.special = rootline
temp.breadcrumbs.special.range = 1|-2
Copied!

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/Sets/Main/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>
Copied!