.. include:: /Includes.rst.txt
.. _configure-topnav:
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:
.. code-block:: html
Since we want to display a menu we again begin defining an :code:`HMENU` object:
.. code-block:: typoscript
TOPNAV = HMENU
This time we have to wrap the menu in a :code:`` tag and - inside that tag -
into :code:`
` tags. We could put both into the same property now, like:
.. code-block:: typoscript
TOPNAV.wrap =
but there also is a way, which makes our definitions look nicer to the eye:
we define both wraps seperately. Like every content object :code:`HMENU` also
provides a property named :code:`stdWrap`. TYPO3 CMS applies this property
after all other properties of the object have been computed.
.. tip::
If you don't remember exactly what :code:`stdWrap` does, you may want
to refresh your knowledge by returning to the :ref:`TypoScript in 45 Minutes Tutorial `.
Here we only use the :code:`wrap` property of :code:`stdWrap` to add a normal wrap.
So we add this to our template:
.. code-block:: typoscript
TOPNAV.wrap =
TOPNAV.stdWrap.wrap = |
Note that the order in which we define :code:`TOPNAV.wrap` and :code:`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 :code:`wrap` is computed before :code:`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
.. code-block:: typoscript
TOPNAV.1 = TMENU
TOPNAV.1 {
}
For the normal rendering (the default rendering) we again need :code:`- ` tags:
.. code-block:: typoscript
TOPNAV.1 {
// Definitions per page
// NO: default formatting
NO = 1
NO {
allWrap =
- |
}
}
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 :code:`NO`.
In our case we need to configure the state :code:`ACT`, which has the same properties
as the state :code:`NO` does. So we add this to the definition of our :code:`TMENU`:
.. code-block:: typoscript
TOPNAV.1 {
// ACT: User is on this or below this page
// Activate this state for this menu
ACT = 1
ACT {
allWrap = - |
}
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:
.. code-block:: typoscript
////////////////////////////////////////////////////////////////////////////////////////////
//
// Subpart TOPNAV
//
////////////////////////////////////////////////////////////////////////////////////////////
// The subpart TOPNAV outputs the main navigation
TOPNAV = HMENU
TOPNAV.wrap =
// "stdWrap" properties are applied after "wrap".
TOPNAV.stdWrap.wrap = |
// 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
// -
allWrap = - |
}
// ACT: User is on this or below this page
// Activate this state for this menu
ACT = 1
ACT {
// Use another wrap
allWrap = - |
}
}
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 :code:`ACT` state.