menu

Rendering a Menu in AFX

Draft

This page is not yet fully completed - we are still working on the content here. Expect some rough edges 🙃

When rendering a Menu in Atomic Fusion, you can't use the Neos.Neos:Menu Fusion object, as it is based on Neos.Fusion:Template which expects a Fluid template.

Rendering an one-level deep menu

In the snippet below, we create a prop menuItems, which is an object with an url and label property; which is then rendered through AFX.

prototype(MySite:Menu) < prototype(Neos.Fusion:Component) {
    menuItems = Neos.Fusion:Map {
        items = ${q(site).children('[instanceof Neos.Neos:Document]').filter('[_hiddenInIndex=false]').get()}
        itemRenderer = Neos.Fusion:DataStructure {
            url = Neos.Neos:NodeUri {
                node = ${item}
            }
            label = ${q(item).property('title')}
        }
    }

    renderer = afx`
        <Vendor.Site:Component:Molecule.Menu items={props.menuItems} />
    `
}

TODOs:

  • How to render a menu two levels deep? (or more)
  • How to handle the "current node" CSS class?