TYPO3 Logo
Sitepackage Tutorial
Release: 11.5

Loading data.

  • Preface
  • Introduction
  • Minimal example
  • Design Template
  • Fluid Templates
    • Fluid in depth
  • TypoScript configuration
  • Extension Configuration
  • Extension installation
    • Extension installation without composer
  • Create initial pages
  • Main Menu Creation
  • Content mapping
  • Summary
  • Sitemap
  • Index

PAGE CONTENTS

  • Main Menu Creation
    • Add 'MenuProcessor'
    • Update Fluid and Implement Main Menu
    • Preview Page
  1. Start
  2. Main Menu Creation
View source How to edit Edit on GitHub

Display settings


Color scheme of code blocks:


Main Menu Creation¶

At this point, we have a working frontend for our website, but an important part is missing: there is no easy way to navigate through the pages, which is a crucial part of any website. The following section explains how to implement a simple one-level menu by using TYPO3's Frontend Data Processor MenuProcessor. Other options are available (e.g. the HMENU cObject as described in the TypoScript Reference).

Add 'MenuProcessor'¶

Open file Configuration/TypoScript/setup.typoscript and locate the part which defines the FLUIDTEMPLATE. Add the dataProcessing { ... } section below the paths declarations as follows.

EXT:site_package/Configuration/TypoScript/setup.typoscript¶
// Part 1: Fluid template section
10 = FLUIDTEMPLATE
10 {
      // ...
   }
   templateRootPaths {
      // ...
   }
   partialRootPaths {
      // ...
   }
   layoutRootPaths {
      // ...
   }
   dataProcessing {
      10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      10 {
         levels = 1
         includeSpacer = 1
         as = mainnavigation
      }
   }
}

Note the directive as = mainnavigation: this defines the name of the menu which will be used in the next step. It is 'mainnavigation' in this case.

Update Fluid and Implement Main Menu¶

To make the output of the MenuProcessor visible at the frontend, we have to adjust the Fluid template slightly. You may remember that we moved the main menu to the Fluid layout file, which is located under Resources/Private/Layouts/Page/Default.html (see section The website layout file). Open this file and adjust it as shown here:

EXT:site_package/Resources/Private/Layouts/Page/Default.html¶
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
   <a class="navbar-brand" href="#">Navbar</a>
   <button  class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault"
            aria-expanded="false"
            aria-label="Toggle navigation"
            >
      <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
         <f:for each="{mainnavigation}" as="mainnavigationItem">
            <li class="nav-item {f:if(condition: mainnavigationItem.active, then: 'active')}">
               <a class="nav-link"
                  href="{mainnavigationItem.link}"
                  target="{mainnavigationItem.target}"
                  title="{mainnavigationItem.title}"
                  >
                  {mainnavigationItem.title}
               </a>
            </li>
         </f:for>
      </ul>
   </div>
</nav>

<f:render section="Main" />

The changes are inside the <ul> ... </ul> tags. The new code extends the list by using a "For-ViewHelper", which builds a loop and iterates variable mainnavigation as single items named mainnavigationItem. Each item represents one link to a page in the menu. The attributes we are using are:

  • mainnavigationItem.link: the actual link to the page or external resource

  • mainnavigationItem.target: if the link should be opened in a new window for example

  • mainnavigationItem.title: the page or link title

The construct {f:if(condition: mainnavigationItem.active, then: 'active')} is a special case. This is called an inline notation, that outputs the word active, if variable mainnavigationItem.active is set. In this example, the inline notation is used to output active as the CSS class name.

Preview Page¶

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.

../_images/FlushFrontendCaches.png

Flush the frontend cache after changing template files¶

The preview in the screenshot above shows the menu with three page links: "Page 1", "Page 2" and "Page 3". If everything is working as expected, let's configure the dynamic content rendering in the next step.

  • Previous
  • Next
  • Home
  • Contact
  • Issues
  • Repository

Last updated: Feb 25, 2023 10:42

Last rendered: Feb 25, 2023 10:43

  • TYPO3 Theme 4.7.9
  • DRC v3.0.dev30
© Copyright since 2017 by the TYPO3 contributors
  • Legal Notice
  • Privacy Policy
  • Code of Conduct