Create a menu with TypoScript

Until now, we learned how the page content is rendered; however, the page navigation is missing.

TYPO3 provides a special data processor, the menu data processor to pass data to render a menu to the Fluid template.

Configure the data processor in TypoScript:

TypoScript Setup 
page = PAGE
page {
  10 = FLUIDTEMPLATE
  10 {
    templateName = Default
    templateRootPaths.10 = EXT:site_package/Resources/Private/Templates/Pages/
    # ...
    dataProcessing {
      10 = menu
      10.as = myMainMenu
    }
  }
}
Copied!

And render the menu in your Fluid template. You need at least a Minimal site package (see site package tutorial) to keep your templates in its private resources folder, for example /packages/site_package/Resources/Private/Templates:

/packages/site_package/Resources/Private/Templates/Pages/Default.html 
<header>
    <ul class="navbar-nav">
        <f:for each="{myMainMenu}" 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>
</header>
<main>
    <p>Hello World!</p>
</main>
Copied!

Find more examples on how to configure and render menus with TypoScript and Fluid in chapter Main menu of the Site Package Tutorial.

You can find more examples on how to output menus of different styles, including multi-level menus, breadcrumbs, language menus, and sitemaps in the chapter about the menu data processor.