Main menu

Use the data processor menu

The data processor 'menu' can be configured to provide the data of all pages in your current site to your page template.

We save the TypoScript configuration for the menu into file Configuration/Set/MySitePackage/TypoScript/Navigation/menu.typoscript:

page {
  10 {
    dataProcessing {
      20 = menu
    }
  }
}

Update the Fluid partial for the menu

Until now we had static HTML in the file Resources/Private/Templates/Partials/Navigation/Menu.html.

We created that file in section Extract the menu into a partial.

Replace the static HTMl with Fluid:

A menu usually contains several menu entries. We use the For ViewHelper <f:for> to iterate over all menu entries and render them in turn:

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <f:for each="{menu}" as="menuItem">
        <li class="nav-item">
            <a class="nav-link {f:if(condition: menuItem.active, then:'active')}"
               href="{menuItem.link}"
               target="{menuItem.target}"
               title="{menuItem.title}"
            >
                {menuItem.title}
            </a>
        </li>
    </f:for>
</ul>

In each loop the current menu item is stored in variable {menuItem}.

You can use the Debug ViewHelper <f:debug> to debug what kind of data the variable contains like this:

<ul class="navbar-nav mr-auto">
    <f:for each="{menu}" as="menuItem">
+       <f:debug>{menuItem}</f:debug>
        <li class="nav-item {f:if(condition: menuItem.active, then:'active')}">

The debug output on your page should now look like this:

array(8 items)
    data => array(78 items)
    title => 'My page' (22 chars)
    link => '/my-page' (26 chars)
    target => '' (0 chars)
    active => 0 (integer)
    current => 0 (integer)
    spacer => 0 (integer)
    hasSubpages => 1 (integer)

The following data is of interest:

{menuItem.data}:

Contains the raw data of the database record of the page for the menu item.

{menuItem.link}:

The actual link to the page. For external links it contains the URL.

{menuItem.target}:

This might contain "_blank" if the menu item represents an external link.

{menuItem.title}:

The title to be displayed in the menu. By default the navigation title if set, the title otherwise.

{menuItem.active}

Contains 1 if the page of the current menu item is in the rootline of the current page.

The construct {f:if(condition: menuItem.active, then: 'active')} output the string "active" if {menuItem.active} is set. The syntax might look confusing at first. It is an If ViewHelper <f:if> displayed in the Fluid inline notation.

Preview the page and use the menu

The menu in the page should now function and allow you to navigate from page to page.

Delete the frontend caches and preview the changes:

When previewing the site as it stands now, we can verify if everything is working as expected and if the menu is generated. Go to WEB → View and check, if the menu reflects the pages you created in the backend. Add one or two additional pages to the page tree and check to see if they appear in the preview.

If the menu does not change, you possibly need to flush the frontend caches, then reload the preview.

The preview in the screenshot above shows the menu with three page links: "Page 1", "Page 2" and "Page 3".