Editable Icons in Navigation

Community Newcomer's Corner
1

Hey,
I would like to add an icon for each Main navigation item.

But I don’t know how. I added a property in the document to edit the image, this is working.

But how can I combine this with my navigation template?

This is my navigation template so far.

prototype(WG.Site:Component.Header.MenuItemsRenderer) < prototype(Neos.Fusion:Component) {
items = false
@if.has = ${this.items}

renderer = afx`
<nav class="main-navigation">
    <ul class="vertical menu mobileNav-text-right mobileNav-horizontal main-nav" data-responsive-menu="accordion mobileNav-dropdown">
        <Neos.Fusion:Loop items={props.items} itemName="menuItem" @children="itemRenderer">
            <li class={'navigation-item ' + (menuItem.state ? 'navigation-item--state-' + menuItem.state : '') }>
                <Carbon.Link:Link
                    node={menuItem.node}
                    backendLink={true}
                    renderDefaultTagIfNoLink={true}>
                    
                    { menuItem.label }
                </Carbon.Link:Link>

                <WG.Site:Component.Header.MenuSubItemsRenderer items={menuItem.subItems}  />
            </li>
        </Neos.Fusion:Loop>
    </ul>
  </nav>
`
}

// Submenu

prototype(WG.Site:Component.Header.MenuSubItemsRenderer) < prototype(Neos.Fusion:Component) {
  items = false

@if.has = ${this.items}
renderer = afx`
    <ul class="vertical menu subnavigation">
        <Neos.Fusion:Loop items={props.items} itemName="menuItem" @children="itemRenderer">
            <li class={'subnavigation-item navigation-item ' + (menuItem.state ? 'navigation-item--state-' + menuItem.state : '') }>
                <Carbon.Link:Link
                    node={menuItem.node}
                    backendLink={true}
                    renderDefaultTagIfNoLink={true}>
                    { menuItem.label }
                </Carbon.Link:Link>
            </li>
        </Neos.Fusion:Loop>
    </ul>
`

}

Thanks for your help!

2

Hello,

great that you start working with Neos.
There are several approaches to have icons in menu items.
Some people just add an icon property, and so you can choose images for each menu item.
Others add, maybe a drop-down where you choose one value and then render a CSS class for instance to adds an icon to the menu item.
Of course there are some more options :wink:

When you want just the main menu items with the icons, you can of course create special main menu node type with the icon property and all other sub items will be just general page documents or what ever you need.

The easiest way to render the icon will be properly

<Neos.Neos:ImageTag asset={props.icon} />

Of course, you can use packages like the sitegeist package for responsive images and so on.
So in the end you just need to property in the node type and use the property on the first level.

You can also check for the icon with a condition.

<div class="item-icon-container" @if.icon={props.icon} >
    <Neos.Neos:ImageTag asset={props.icon} />
</div>

Hope that helps a bit.
In your case it is maybe ``menuItem.icon… depends on the data.

1 Like
3

Hey Markus,
thanks for your help!

Do I have to define the prop before using the

<Neos.Neos:ImageTag asset={props.icon} />

and can I use the Tag inside of the

<Carbon.Link:Link
    node={menuItem.node}
    backendLink={true}
    renderDefaultTagIfNoLink={true}>

    { menuItem.label }
</Carbon.Link:Link>

I dont know why but I dont get any output.

4

I got a solution on Discord.

# Rendering des Nav Images
prototype(WG.Site:Atom.MenuChapterImage) < prototype(Neos.Fusion:Component) { 
  icon=false @if.has=${this.icon}
    renderer=Neos.Neos:ImageTag { 
      asset=${q(node).property('navImage')
    } 
    attributes.class='menu-image' 
  } 
}
  <Neos.Fusion:Loop items={props.items} itemName="menuItem" @children="itemRenderer">
<li class={'navigation-item ' + (menuItem.state ? ' navigation-item--state-' + menuItem.state : '' ) }>

  <Carbon.Link:Link node={menuItem.node} backendLink={true} renderDefaultTagIfNoLink={true}>

    <WG.Site:Atom.MenuChapterImage icon={menuItem.node.properties.navImage} />

    { menuItem.label }
  </Carbon.Link:Link>

  <WG.Site:Atom.MenuChapterImage items={menuItem.subItems} />
</li>

</Neos.Fusion:Loop>

5

When I see this, the menuItem is probably not the node with the property. Then it is maybe

<WG.Site:Atom.MenuChapterImage icon={menuItem.node.poperties.navImage} />

As I have not all the code it is just a guess. You can use Neos.Fusion:Debug.Console for checking the menuItem.

1 Like
6

Yes this is it!

1 Like
7

Great that it works now :slight_smile:

8

Jon on Discord said, this would be even better, because of the better performace:

<WG.Site:Atom.MenuChapterImage icon={q(menuItem.node).property('navImage') } />
1 Like
9

He is right :slight_smile:

1 Like