[SOLVED] Menu with external links


(Florian Rubel) #1

Hello everybody,

I try to create a menu with external links. All I want to achieve is to make it configurable for the NodeType Shortcut if the link will open in the same or a new tab/window (so target="_blank").

Maybe it’s a stupid question, but I did’t found anything userful at google or here in this forum. Maybe I am searching for the wrong thing.

I was able to create a property for the Shortcuts named targetWindow with a selection box, but I was unable to access/use this configuration/property while renderen the menu.

Here is what my current menu template is currently containing:

{namespace neos=Neos\Neos\ViewHelpers}
<f:render section="itemList" arguments="{items: items, site: site}" />

<f:section name="itemList">
<div class="main-nav">
    <nav class="container">
        <div class="main-nav__header">
            <button type="button" class="main-nav__toggle">
                <span>Toggle navigation</span>
            </button>
            <a class="main-nav__brand-logo-link" href="{neos:uri.node(node: '~')}">
                
            </a>
        </div>
        <ul class="main-nav__menu">
            <f:for each="{items}" as="item" iteration="menuItemIterator">
                <li class="main-nav__menu-item {item.state}">
                    <f:if condition="{item.subItems}">
                        <f:then>
                            <neos:link.node class="main-nav__menu-item-link main-nav__menu-item-link--subitems" node="{item.node}">{item.label}</neos:link.node>
                            <f:render section="subList" arguments="{items: item.subItems}" />
                        </f:then>
                        <f:else>
                            <neos:link.node class="main-nav__menu-item-link" node="{item.node}">{item.label}</neos:link.node>
                        </f:else>
                    </f:if>
                </li>
            </f:for>
        </ul>
    </nav>
</div>
</f:section>

<f:section name="subList">
<ul class="main-nav__submenu">
	<f:for each="{items}" as="item">
		<li class="main-nav__submenu-item {item.state}">
			<neos:link.node class="main-nav__submenu-item-link" node="{item.node}">{item.label}</neos:link.node>
		</li>
	</f:for>
</ul>
</f:section>

And this is the config: NodeTypes.Override.Neos.NodeTypes.Shortcut.yaml

'Neos.Neos:Shortcut':
  properties:
    targetWindow:
      type: string
      defaultValue: '_self'
      ui:
        label: 'Target Window'
        inspector:
          group: 'document'
          editor: 'Neos.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              _self:
                label: '_self'
                icon: 'icon-link'
              _blank:
                label: '_blank'
                icon: 'icon-external-link-alt'

(Daniel Lienert) #2

Hey Florian,

That should be possible by addding target=“{item.node.properties.targetWindow}” to the link viewhelper.

(Out of my head, as written on my phone :wink:, so not tested)

Cheers,
Daniel


(Florian Rubel) #3

Hi Daniel,
thank you.

I tried {item.node.property.targetWindow} and it resulted in a memory overflow. I will try .properties this evening.


(Florian Rubel) #4

It worked. Big thank you!