Directory menu - menu of subpages

A HMENU of type special = directory lets you create a menu listing the subpages of one or more parent pages.

The parent pages are defined in the property special.value.

This menu type can be used, for example, to display all subpages of a certain page as meta menu or footer menu.

Mount pages are supported.

Properties

special.value

special.value

special.value
Type
Comma separated list of page IDs /stdWrap
Default
current page ID

This will generate a menu of all pages with pid = 35 and pid = 56.

EXT:site_package/Configuration/TypoScript/setup.typoscript 
lib.metaMenu = HMENU
lib.metaMenu {
    special = directory
    special.value = 35, 56
    // render the menu
}
Copied!

Example: Menu of all subpages

The content element Menu > Subpages provided by the system extension EXT:fluid_styled_content is configured with a MenuProcessor which is based on the options of the HMENU and provides all its properties:

EXT:fluid_styled_content/Configuration/TypoScript/ContentElement/MenuSubpages.typoscript 
# Menu of subpages of selected pages:
# ...
#
# CType: menu_subpages

tt_content.menu_subpages =< lib.contentElement
tt_content.menu_subpages {
    templateName = MenuSubpages
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        10 {
            special = directory
            special.value.field = pages
            dataProcessing {
                10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                10 {
                    references.fieldName = media
                }
            }
        }
    }
}
Copied!

The following Fluid template can be used to style the menu:

EXT:fluid_styled_content/Resources/Private/Templates/MenuSubpages.html 
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">

    <f:if condition="{menu}">
        <ul>
            <f:for each="{menu}" as="page">
                <li>
                    <a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')}{f:if(condition: page.current, then: ' aria-current="page"')} title="{page.title}">
                        <span>{page.title}</span>
                    </a>
                </li>
            </f:for>
        </ul>
    </f:if>

</f:section>
</html>
Copied!