Navigation-elements without page or shortcut

Community Newcomer's Corner
1

Hi,
I’m looking for a solution to add navigation-elements only for more clarity in structure (a wrapping element) without a related page or shortcut.
###Example:

- Rivers in Germany
-  - Rivers in the south
-  -  - Rhein
-  -  - Donau
-  -  - ...
-  - Rivers in the north
-  -  - Elbe
-  -  - ...

There are pages for Rivers in Germany, Rhein, Donau, Elbe, …
But for «Rivers in the south» and «Rivers in the north», there have to be NO pages or shortcuts for.
Because shortcuts «first child» or others would run into misunderstood.
Both are only for grouping in the navigation – nothing else.

###Question:
Maybe I’m looking for wrong terms, or too far.
Did someone know a build-in solution in Neos, or a good and simple solution to build such navigation-grouping elements, which are not clickable or related to pages/shortcuts?

2

Basically, you need access to the menu rendering, which you can do easily by swapping out the template of your Menu, like so:

menu = TYPO3.Neos:Menu { (or Neos.Neos:Menu if youre on 3.0 already)
	templatePath = 'resource://Your.SitePackage/Private/Templates/NodeTypes/Menu.html'
}

Then you have full control over how the menu is rendered. Then you’ll need a custom document node type for the structuring pages. In your Menu, you now can distinguish between the two types and render them accordingly, either as a structuring element or as a link. The default MenuImplementation wraps your nodes in so-called “items”, the node itself is accessible via item.node. I would then roll my own MenuImplementation like this:

menu = TYPO3.Neos:Menu { (or Neos.Neos:Menu if youre on 3.0 already)
	templatePath = 'resource://Your.SitePackage/Private/Templates/NodeTypes/Menu.html'
	@class = 'Your\\SitePackage\\TypoScript\\YourMenuImplementation'
}

Make your MenuImplementation.php inherit from the default one (TYPO3\Neos\TypoScript\MenuImplementation) and override buildMenuItemRecursive() to add a marker property to the item, depending on whether or not you’re dealing with a structuring element. This could look like the following:

    /**
     * Prepare the menu item with state and sub items if this isn't the last menu level.
     *
     * @param NodeInterface $currentNode
     * @return array
     */
    protected function buildMenuItemRecursive(NodeInterface $currentNode)
    {
        if ($this->isNodeHidden($currentNode)) {
            return null;
        }

        $item = array(
            'node' => $currentNode,
            'state' => self::STATE_NORMAL,
            'label' => $currentNode->getLabel(),
            'menuLevel' => $this->currentLevel,

            // This line was added to the default
            'isStructuring' => $currentNode->getNodeType()->getName() === 'Your.SitePackage:StructuringNode'
        );

        $item['state'] = $this->calculateItemState($currentNode);
        if (!$this->isOnLastLevelOfMenu($currentNode)) {
            $this->currentLevel++;
            $item['subItems'] = $this->buildMenuLevelRecursive($currentNode->getChildNodes($this->getFilter()));
            $this->currentLevel--;
        }

        return $item;
    }

In your custom menu fluid, you can now simply do this:

<f:if condition="{item.isStructuring}">
    <f:then>
        <span>{item.label}</span>
    </f:then>
    <f:else>
        <neos:link.node node="{item.node}">{item.label}</neos:link.node>
    </f:else>
</f:if>
3

Hey Bastian,
thank you for help and your solution. Looks great.

Have done my own solution, but thought maybe there is some build-in solution.
So my solution without PHP is maybe more kinky but for the moment it is running …
Maybe someone will find useful pieces or for boilerplate or starting point. Or have some idea for improvement.

###Working Solution

#root.yaml or included NodeTypes.StructurePage.yaml

# Page only for navigation-structure no page or shortcut relation
'Vendor.Site:StructurePage':
  superTypes:
    'TYPO3.Neos:Document': TRUE
  label: '${(q(node).property(''title'') ? q(node).property(''title'') + '' '' : '''') + ''[StructurePage'' +  (q(node).property(''nodeDescription'') ? '' ('' + q(node).property(''nodeDescription'') + '')'' : '''' ) + '']''}'
  ui:
    label: Structure-Page
    icon: icon-sitemap
    group: yourGroup
    inlineEditable: true
    position: 300
  childNodes:
    no-data:
      type: 'TYPO3.Neos:ContentCollection'
      constraints:
        nodeTypes:
          '*': FALSE
  constraints:
    nodeTypes:
      '*': TRUE

Backend-Template

#StruturePage.html

<div id="neos-shortcut">
    <p>This Page is only a STRUCTURE page!<br />
    For wrapping child-pages (parent-group in navigation)</p>
{content -> f:format.raw()}
</div>
```
MenuTemplate
```html`
#MainMenu.html

{namespace neos=TYPO3\Neos\ViewHelpers}
<f:render section="firstLevel" arguments="{items: items}" />

<f:section name="firstLevel">
    <ul id="menu" class="nav">
        <f:render section="MenuRenderer" arguments="{_all}" />
    </ul>
</f:section>


<f:section name="subLevel">
    <ul class="sub-menu">
        <f:render section="MenuRenderer" arguments="{_all}" />
    </ul>
</f:section>

<f:section name="MenuRenderer">
    <f:for each="{items}" as="item" iteration="menuItemIterator">
        <f:if condition="{item.node.nodetype.name} != 'Vendor.Site:StructurePage'">
            <f:then>
                <li class="{item.state}{f:if(condition: menuItemIterator.isLast, then: ' last')}{f:if(condition: item.subItems, then: ' menu-item-has-children')}">
                    <neos:link.node node="{item.node}">{item.label}</neos:link.node>
                    <f:if condition="{item.subItems}">
                        <f:render section="subLevel" arguments="{items: item.subItems}" />
                    </f:if>
                </li>
            </f:then>
            <f:else>
                <li class="structure-item {item.state}{f:if(condition: menuItemIterator.isLast, then: ' last')}{f:if(condition: item.subItems, then: ' menu-item-has-children')}">
                    <span>{item.node.properties.title}</span>
                    <f:if condition="{item.subItems}">
                        <f:render section="subLevel" arguments="{items: item.subItems}" />
                    </f:if>
                </li>
            </f:else>
        </f:if>
    </f:for>
</f:section>
```
page.template

````ruby
##################################
# StructurePage Object template  #
##################################
root.dataCollection {
    condition = ${q(node).is('[instanceof Vendor.Site:StructurePage]')}
    renderPath = '/dataCollection'
}

dataCollection = Vendor.Site:defaultPage {
    body{
        templatePath = 'resource://Vendor.Site/Private/Templates/Page/StructurePage.html'
        content = ContentCollection {
            attributes.class.@process.collectionClass >
            nodePath = 'no-data'
        }
    }
}
########################################
# END OF StructurePage Object template #
########################################
```
Hope will help
Cheers Martin