Skip to main content

Notifications

Announcements

No record found.

Supply chain | Supply Chain Management, Commerce
Suggested answer

More levels for navigation-menu module

(0) ShareShare
ReportReport
Posted on by 35

I'm using the default navigation-menu module (@msdyn365-commerce-modules/navigation-menu, version 9.40.19). It's currently limited to 3 levels (clear by looking at @msdyn365-commerce-modules/navigation-menu/src/modules/navigation-menu/navigation-menu.definition.json).

Documentation: learn.microsoft.com/.../nav-menu-module

I need to have more levels, therefore I created a definition extension in my custom theme:

1. Create src/themes/<my-custom-theme>/definition-extensions/navigation-menu.definition.ext.json:

{
  "$type": "definitionExtension",
  "config": {
    "cmsNavItems": {
      "type": "array",
      "friendlyName": "Extended static menu items",
      "description": "If source allows manual authoring, you can configure the menu items",
      "items": {
        "$ref": "./MultiMenuItem.json#/definitions/menuItem"
      },
      "group": "Data source"
    }
  }
}

The $ref that I'm using looks like this:

{
    "definitions": {
        "menuItem": {
            "type": "object",
            "friendlyName": "Menu item",
            "description": "Menu item property",
            "properties": {
                "linkText": {
                    "type": "string",
                    "friendlyName": "Menu Item Text",
                    "description": "Text for Menu Item",
                    "default": "Menu Item Text "
                },
                "linkUrl": {
                    "type": "link",
                    "friendlyName": "Menu Item Link target",
                    "description": "Destination url for Menu Item Link",
                    "required": false
                },
                "image": {
                    "type": "image",
                    "friendlyName": "Menu Item Image",
                    "description": "Menu Item Image",
                    "required": false
                },
                "imageLink": {
                    "type": "link",
                    "friendlyName": "Menu Item Image Link",
                    "description": "Menu Item Image Link",
                    "required": false
                },
                "ariaLabel": {
                    "type": "string",
                    "friendlyName": "Menu item link aria label",
                    "description": "Aria Label for Menu Item Link",
                    "default": ""
                },
                "openInNewTab": {
                    "type": "boolean",
                    "friendlyName": "Open in new tab",
                    "description": "Open the link in a new tab",
                    "default": false
                },
                "subMenus": {
                    "type": "array",
                    "friendlyName": "List of Sub menus",
                    "description": "List of Sub menus",
                    "items": {
                        "type": "object",
                        "friendlyName": "Sub Menu Action Link",
                        "description": "Sub Menu Action Link property",
                        "properties": {
                            "linkText": {
                                "type": "string",
                                "friendlyName": "Sub menu link text",
                                "description": "Sub Menu Text for link",
                                "default": "Sub Menu Link text "
                            },
                            "linkUrl": {
                                "type": "link",
                                "friendlyName": "Sub Menu Link target",
                                "description": "Destination url for sub menu link",
                                "required": true
                            },
                            "ariaLabel": {
                                "type": "string",
                                "friendlyName": "Sub menu link aria label",
                                "description": "Aria Label for sub menu link",
                                "default": ""
                            },
                            "image": {
                                "type": "image",
                                "friendlyName": "Menu Item Image",
                                "description": "Menu Item Image",
                                "required": false
                            },
                            "imageLink": {
                                "type": "link",
                                "friendlyName": "Menu Item Image Link",
                                "description": "Menu Item Image Link",
                                "required": false
                            },
                            "subMenus": {
                                "type": "array",
                                "friendlyName": "List of Sub menus",
                                "description": "List of Sub menus",
                                "items": {
                                    "type": "object",
                                    "friendlyName": "Sub Menu Action Link",
                                    "description": "Sub Menu Action Link property",
                                    "properties": {
                                        "linkText": {
                                            "type": "string",
                                            "friendlyName": "Sub menu link text",
                                            "description": "Sub Menu Text for link",
                                            "default": "Sub Menu Link text "
                                        },
                                        "linkUrl": {
                                            "type": "link",
                                            "friendlyName": "Sub menu link target",
                                            "description": "Destination url for sub menu link",
                                            "required": true
                                        },
                                        "ariaLabel": {
                                            "type": "string",
                                            "friendlyName": "Sub menu link aria label",
                                            "description": "Aria Label for sub menu link",
                                            "default": ""
                                        },
                                        "image": {
                                            "type": "image",
                                            "friendlyName": "Menu Item Image",
                                            "description": "Menu Item Image",
                                            "required": false
                                        },
                                        "imageLink": {
                                            "type": "link",
                                            "friendlyName": "Menu Item Image Link",
                                            "description": "Menu Item Image Link",
                                            "required": false
                                        },
                                        "subMenus": {
                                            "type": "array",
                                            "friendlyName": "List of Sub menus",
                                            "description": "List of Sub menus",
                                            "items": {
                                                "type": "object",
                                                "friendlyName": "Sub Menu Action Link",
                                                "description": "Sub Menu Action Link property",
                                                "properties": {
                                                    "linkText": {
                                                        "type": "string",
                                                        "friendlyName": "Sub menu link text",
                                                        "description": "Sub Menu Text for link",
                                                        "default": "Sub Menu Link text "
                                                    },
                                                    "linkUrl": {
                                                        "type": "link",
                                                        "friendlyName": "Sub menu link target",
                                                        "description": "Destination url for sub menu link",
                                                        "required": true
                                                    },
                                                    "ariaLabel": {
                                                        "type": "string",
                                                        "friendlyName": "Sub menu link aria label",
                                                        "description": "Aria Label for sub menu link",
                                                        "default": ""
                                                    },
                                                    "image": {
                                                        "type": "image",
                                                        "friendlyName": "Menu Item Image",
                                                        "description": "Menu Item Image",
                                                        "required": false
                                                    },
                                                    "imageLink": {
                                                        "type": "link",
                                                        "friendlyName": "Menu Item Image Link",
                                                        "description": "Menu Item Image Link",
                                                        "required": false
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
 

It's basically a copy from @msdyn365-commerce-modules/definitions/dist/src/MenuItem.json#/definitions/menuItem with additional "subMenus" array definitions to get more navigation levels.

2. During the build I get the following console output:

-- config value 'cmsNavItems' already exists in parent definition. The property defined in extended definition will be applied

Sound correct, because I redefined an OOTB field.

Result: I get the default behavior with only 3 levels

Expectations: Sitebuilder should use my new custom override definition

FYI: I saw a similar discussion here:    - but it leads to more-less no solution.

  • Suggested answer
    Daniel Koch Profile Picture
    Daniel Koch 35 on at
    RE: More levels for navigation-menu module

    After conversation with the Microsoft support I can answer this post:

    1. If you want to override a default definition field you need to set `override: true`, this is mentioned in the table on: learn.microsoft.com/.../configure-properties-context

    2. Will be fixed within the next releases

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Congratulations 2024 Spotlight Honorees

Kudos to all of our 2024 community stars! 🎉

Meet the Top 10 leaders for December

Congratulations to our December super stars! 🥳

Start Your Super User Journey

Join the ranks of our community heros! 🦹

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,735 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,466 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans