Navigation in Neos Fusion with AFX renderer

Navigation.fusion

# Navigation Fusion Object - extends Neos.Neos:Menu and is rendering menus inserted as content elements
prototype(Breadlesscode.Vendor:Navigation) < prototype(Neos.Fusion:Component) {
  maxLevel = ${ '2' }
  maxLevel.@process.1 = ${String.toInteger(value)}
  items = ${ q(site).children('[instanceof Neos.Neos:Document][_hiddenInIndex=false][_hidden=false]') }
  class= ${ false }
  isMain = ${ false }

  renderer = afx`
    <nav class={props.class}>
      <ul class="main__menu" class.@if.mainNav={props.isMain}>
        <Breadlesscode.Vendor:NavigationList items={props.items} level={ 1 } maxLevel={props.maxLevel} />
      </ul>
    </nav>
  `

  @cache {
    mode = 'cached'
    entryIdentifier {
      documentNode = ${documentNode}
      node = ${node}
    }
    entryTags {
      1 = 'NodeType_Neos.Neos:Document'
      2 = ${'Node_' + node.identifier}
    }
  }
}

prototype(Breadlesscode.Vendor:NavigationList) < prototype(Neos.Fusion:Component) {
  items = ${ [] }
  level = ${ '1' }
  level.@process.1 = ${String.toInteger(value)}
  maxLevel = ${ '2' }
  maxLevel.@process.1 = ${String.toInteger(value)}

  renderer = afx`
    <Neos.Fusion:Collection collection={props.items} itemName="item" @children="itemRenderer">
      <Breadlesscode.Vendor:NavigationListItem item={item} level={props.level} maxLevel={props.maxLevel} />
    </Neos.Fusion:Collection>
  `
}

prototype(Breadlesscode.Vendor:NavigationListItem) < prototype(Neos.Fusion:Component) {
  item = ${ }
  itemUri = Neos.Neos:NodeUri {
    node = ${  item }
  }
  level = ${ '1' }
  level.@process.1 = ${String.toInteger(value)}
  maxLevel = ${ '2' }
  maxLevel.@process.1 = ${String.toInteger(value)}
  subItems = ${ this.item && (this.level + 1) <= this.maxLevel ? q(this.item).children('[instanceof Neos.Neos:Document]').filter('[_hiddenInIndex=false][_hidden=false]') : [] }

  renderer = afx`
    <li class={props.subItems ? 'drop' : ''}>
      <a href={props.itemUri}>{props.item.label}</a>
      <ul class="dropdown" @if.hasSub={props.subItems}>
        <Breadlesscode.Vendor:NavigationList items={props.subItems} level={props.level + 1} maxLevel={props.maxLevel} />
      </ul>
    </li>
  `
}