---
title: "Breadcrumb menu"
manual: "News system"
version: "main"
permalink: "https://docs.typo3.org/permalink/georgringer/news:breadcrumb@main"
source: "Tutorials/BestPractice/BreadcrumbMenu.rst"
rendered: "2026-09-23T19:24:09+00:00"
---

# Breadcrumb menu {#breadcrumb}

There are currently two suggested ways to make a breadcrumb menu containing
the detail page of the current news: Based on data processing and Fluid template
and based on pure TypoScript. Use the first method if you have no breadcrumb yet
or your breadcrumb is already based on data processors. Use the second if
your breadcrumb is already based on TypoScript and you do not wish to change it
for now.

## Breadcrumb based on data processing and Fluid {#breadcrumbfluid}

<!-- TODO: no Markdown rendering for "versionadded" -->

With version 7.2 a new data processor, AddNewsToMenuProcessor has
been added which is useful for detail pages to add the news record as
fake menu entry.

To use the data processor `AddNewsToMenuProcessor` add the following
TypoScript to the setup section in your site package extension. We assume
here that your main `FLUIDTEMPLATE` can be found in
`page.10`.

```typoscript
page.10 = FLUIDTEMPLATE
page.10 {
    # [...] template settings
    dataProcessing {
        # [...] Other data processors
        50 = menu
        50 {
            as = breadcrumbMenu
            special = rootline
        }
        60 = add-news-to-menu
        60.menus = breadcrumbMenu
    }
}
```

The property `menus` of the `AddNewsToMenuProcessor` must
contain the key of the `MenuProcessor` containing your breadcrumb. If you
You can use more then one menu here by supplying several keys as comma-separated
list. For example: `60.menus = breadcrumbMenu,myOtherBreadcrumb`.

The data array containing your breadcrumb will now contain an additional entry
if you are on a news detail page. You can debug this data with the following
Fluid snippet:

```html
<f:debug>{breadcrumbMenu}</f:debug>
```

The array will then contain something like that:

```none
array(4 items)
   0 => array(7 items)
   1 => array(7 items)
   2 => array(7 items)
      data => array(84 items)
      title => 'All News' (17 chars)
      link => '/portal/news/' (34 chars)
      target => '' (0 chars)
      active => 1 (integer)
      current => 0 (integer)
      spacer => 0 (integer)
   3 => array(6 items)
      data => array(87 items)
      title => 'Test news' (13 chars)
      active => 1 (integer)
      current => 1 (integer)
      link => 'https://my-page.ddev.site/portal/news/articel/test-news' (101 chars)
      isNews => TRUE
```

You can use code like the following in your sites Fluid template.

```html
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <f:for each="{breadcrumbMenu}" as="item" iteration="iterator">
                <li class="breadcrumb-item ">
                    <a href="{item.link}" title="{item.title}">
                        <f:if condition="{item.isNews}"><i class="fas fa-newspaper"></i></f:if>
                        {item.title}
                    </a>
                </li>
            </f:for>
        </ol>
    </nav>
</div>
```

The result (using Bootstrap 5 and Fontawesome 5 Free) could use like this:

![](../../Images/Frontend/Breadcrumb.png)

> [!TIP]
> **Hint**
>
> I you are displaying the news on a single page that should not be displayed
> without a valid news record, unset the flag **Page enabled in menus**
> in the single pages page properties. This way the page alone does not appear
> in the breadcrumb.

See also chapter [AddNewsToMenuProcessor](https://docs.typo3.org/permalink/georgringer/news:dataprocessing-addnewstomenuprocessor@main).

## Breadcrumb based on TypoScript (legacy) {#breadcrumbtyposcript}

If you already have a breadcrumb menu based on TypoScript in your project,
you can continue to use it and add the news record to it.

```typoscript
lib.navigation_breadcrumb = COA
lib.navigation_breadcrumb {
    stdWrap.wrap = <ul class="breadcrumb">|</ul>

    10 = HMENU
    10 {
        special = rootline
        #special.range =  1

        1 = TMENU
        1 {
            NO = 1
            NO {
                wrapItemAndSub = <li>|</li>
                ATagTitle.field = subtitle // title
                stdWrap.htmlSpecialChars = 1
            }

            CUR <.NO
            CUR {
                wrapItemAndSub = <li class="active">|</li>
                doNotLinkIt = 1
            }
        }
    }

    # Add news title if on single view
    20 = RECORDS
    20 {
        stdWrap.if.isTrue.data = GP:tx_news_pi1|news
        dontCheckPid = 1
        tables = tx_news_domain_model_news
        source.data = GP:tx_news_pi1|news
        source.intval = 1
        conf.tx_news_domain_model_news = TEXT
        conf.tx_news_domain_model_news {
            field = title
            htmlSpecialChars = 1
        }
        stdWrap.wrap = <li>|</li>
        stdWrap.required = 1
    }
}
```

The relevant part starts with `20 = RECORDS` as this cObject
renders the title of the news article.

> [!IMPORTANT]
> Never forget the `source.intval = 1` to avoid SQL injections
> and the `htmlSpecialChars = 1` to avoid Cross-Site Scripting.
> See [security in TypoScript in TYPO3 Explained](https://docs.typo3.org/m/typo3/reference-coreapi/13.4/en-us/Security/GuidelinesIntegrators/Typoscript.html#security-typoscript).