Custom MenuItemLink template doesn't work

[Diman96]

I need two deferent menus on page header-menu and footer-menu, when I create MenuItemLink-Footer.liquid
it is not called from MenuItem-Footer.liquid.

I check templates from this https://docs.orchardcore.net/en/dev/docs/reference/modules/Menu/, and not one does not work. I can call only MenuItemLink-LinkMenuItem.liquid by name "MenuItemLink"

[jtkech]

@Diman96 so what i tried and that works

First if you want to display the same menu but elsewhere, here in the footer zone

• You can use a specialized alternate including a zone differentiator for a widget, so that when you move it to another layer zone through the admin layer UI, it can be rendered differently. But not for a menu, we don't have yet a menu widget. Here you need to add the following in your layout under the zone you want (here the footer zone) and that specify an alternate.

  <footer>
      {% shape "menu", alias: "alias:main-menu", alternate: "Menu__Footer" %}
      {% render_section "Footer", required: false %}
  </footer>
  

• Then in Menu-Footer.liquid you can specify a menu item alternate.

  <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
          {% for item in Model.Items %}
          {% shape_add_alternates item "MenuItem__Footer" %}
          {{ item | shape_render }}
          {% endfor %}
      </ul>
  </div>
  

• Then in MenuItem-Footer.liquid, as we do, you can morphe the shape type of the menu item link. Here no need to use something like this MenuItemLink__Footer because we are morphing a base shape type, not an alternate with differentiators separated by double underscores, anyway it will fallback to MenuItemLink. Then on displaying we will produce alternates based on the menu type and name, but here Footer is not related to another existing menu, so the alternates will be the same. So here we really need another shape type e.g. MenuItemLinkFooter with no separators.

  <li class="nav-item {% if Model.HasItems %}dropdown{% endif %}">
      {% shape_clear_alternates Model %}
      {% shape_type Model "MenuItemLinkFooter" %}
      {{ Model | shape_render }}
      {% if Model.HasItems %}
          <ul class="dropdown-menu">
              {% for item in Model.Items %}
                  {{ item | shape_render }}
              {% endfor %}
          </ul>
      {% endif %}
  </li>
  

• Then in MenuItemLinkFooter.liquid do what you want

If you want to display another menu, here in the footer zone

• Here, you need to create another content item of type Menu that is not creatable by default. So go to the content definition of the Menu type and mark it as creatable, and then create a new menu through the admin UI. In my test i created a new menu whose name is Footer Menu and alias is footer-menu. Because of this menu name we will be able to use FooterMenu as a differentiator in alternates names.

• At this point we don't need to create a Menu-FooterMenu.liquid, unless you want to customize it, but you still need to explicitly call the shape helper in your layout under the footer zone, and without having to use an alternate attribute.

  <footer>
      {% shape "menu", alias: "alias:footer-menu" %}
      {% render_section "Footer", required: false %}
  </footer>
  

• Then you don't need to create MenuItem-FooterMenu.liquid unless you want to add things, but as said in the previous example, you don't need to morphe the shape type with something like MenuItemLink__FooterMenu__LinkMenuItem, because it is a shape type not an alternate.

• Finally, because here we really have a new Menu named Footer Menu, the FooterMenu differentiator will be used to generate all the alternates of the menu item link. So you can use e.g. a MenuItemLink-FooterMenu-LinkMenuItem.liquid to do what you want. Here, as in the blog theme, LinkMenuItem is to use a more specialized alternate based on the type of the menu items you added in your menu, you can also use MenuItemLink-FooterMenu-ContentMenuItem

[Diman96]

Thank you, it helped me a lot.