Breadcrumb menu

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

New in version 7.2.0

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.

page.10 = FLUIDTEMPLATE
page.10 {
    # [...] template settings
    dataProcessing {
        # [...] Other data processors
        50 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        50 {
            as = breadcrumbMenu
            special = rootline
        }
        60 = GeorgRinger\News\DataProcessing\AddNewsToMenuProcessor
        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:

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

The array will then contain something like that:

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.

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

A breadcrumb containing the current news record.

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.

Breadcrumb based on TypoScript (legacy)

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.

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.