TOPNAV subpart

The subpart TOPNAV displays our main menu, which is located inside the orange bar at the top of the page. Here again is the structure of the HTML code, which we need to create:

<div id="nav">
    <!-- ###TOPNAV### Start -->
    <div id="nav_main">
        <ul>
            <li><a>Menu Item 1</a></li>
            <li><a>Menu Item 2</a></li>
            <li id="current"><a>Menu Item 3</a></li>
            <li><a>Menu Item 4</a></li>
        </ul>
    </div>
    <!-- ###TOPNAV### End -->
</div>

Since we want to display a menu we again begin defining an HMENU object:

TOPNAV = HMENU

This time we have to wrap the menu in a <div> tag and - inside that tag - into <ul> tags. We could put both into the same property now, like:

TOPNAV.wrap = <div id="nav_main"><ul>|</ul></div>

but there also is a way, which makes our definitions look nicer to the eye: we define both wraps seperately. Like every content object HMENU also provides a property named stdWrap. TYPO3 CMS applies this property after all other properties of the object have been computed.

Tip

If you don’t remember exactly what stdWrap does, you may want to refresh your knowledge by returning to the TypoScript in 45 Minutes Tutorial.

Here we only use the wrap property of stdWrap to add a normal wrap. So we add this to our template:

TOPNAV.wrap = <ul>|</ul>
TOPNAV.stdWrap.wrap = <div id="nav_main">|</div>

Note that the order in which we define TOPNAV.wrap and TOPNAV.stdWrap.wrap does not matter. TYPO3 CMS always applies different properties of an object based on the order, which is coded inside TYPO3 CMS (and in this case wrap is computed before stdWrap.wrap).

When you had a look at our HTML template you might have noticed that there in fact are two menus: one in the orange bar at the top and one in the left column below the orange bar. The menu at the top (TOPNAV) should only display the first level of pages. The menu in the left column (SUBNAV) should display the subpages for the current page. We will configure SUBNAV later; now we are only interested in TOPNAV.

So what we want to output in the menu is a list of the pages, which we have on level 1 of our page tree in TYPO3 CMS. Again we use a textual menu. So we need to define

TOPNAV.1 = TMENU
TOPNAV.1 {

}

For the normal rendering (the default rendering) we again need <li> tags:

TOPNAV.1 {

        // Definitions per page
        // NO: default formatting
        NO = 1
        NO {
                allWrap = <li>|</li>
        }
}

We also want to apply a different style in the menu to the page that either matches the current page or is part of the navigation leading to the current page. So this time we also have to define another item state besides NO. In our case we need to configure the state ACT, which has the same properties as the state NO does. So we add this to the definition of our TMENU:

TOPNAV.1 {

        // ACT: User is on this or below this page
        // Activate this state for this menu
        ACT = 1
        ACT {
                allWrap = <li id="current">|</li>
        }

This completes our TypoScript code for the subpart TOPNAV. Here is the complete code for that subpart. The order of the properties again is slightly restructured and the code is indented:

////////////////////////////////////////////////////////////////////////////////////////////
//
// Subpart TOPNAV
//
////////////////////////////////////////////////////////////////////////////////////////////

// The subpart TOPNAV outputs the main navigation
TOPNAV = HMENU
TOPNAV.wrap = <ul>|</ul>
// "stdWrap" properties are applied after "wrap".
TOPNAV.stdWrap.wrap = <div id="nav_main">|</div>

// Definition for pages on the first level of the menu
TOPNAV.1 = TMENU
TOPNAV.1 {

        // Definitions per page
        // NO: default formatting
        NO = 1
        NO {
                // Each entry is wrapped by
                // <li> </li>
                allWrap = <li>|</li>
        }

        // ACT: User is on this or below this page
        // Activate this state for this menu
        ACT = 1
        ACT {
                // Use another wrap
                allWrap = <li id="current">|</li>
        }
}

With this code added to our TypoScript template, the main navigation in the orange bar is already working. If you now view the frontend, you will see that the pages created in the TYPO3 CMS backend appear inside the orange bar. Click around the menu and see how the active page updates automatically, as per our definition of the ACT state.