Dynamic Menu Component

Info: Available in brXM 14.3.0 and later.

Class Name

The Dynamic Menu Component is implemented by the following class:

org.hippoecm.hst.component.support.bean.dynamic.MenuDynamicComponent

Overview

The MenuDynamicComponent extends the functionality of the Base Dynamic Component. It renders the contents of a single, selected site menu tree.

Component Parameters

NameTypeDefault valueDescription
*(Any except JcrPath)-The parameter name and value are rendered through the Page Model API.
*JcrPath-The component processes all parameters of this type, looks up the referenced document by its path, and includes its content in the Page Model API. If the path references a non-document node, only the path is rendered.
menuString-The JCR node name of a single site menu within the current channel. This field appears as a dropdown in the Channel Manager. The dropdown is populated using the menu-list-provider, which is implemented by org.hippoecm.hst.platform.provider.MenuListProvider. This provider lists the available HstSiteMenus from the preview channel.

Example Output

The following example shows how MenuDynamicComponent renders its output in the Page Model API JSON response. The configured menu appears inside the models/menu object. The example menu structure is:

  • Home
  • Contact
    • About us
    • Locations
  • Search
{
  "page": {
    "uid0": {},
    ...
    "uid3": {
      "id": "r22_r1_r2",
      "links": {
        "self": {
          "href": "http://localhost/site/resourceapi?_hn:type=component-rendering&_hn:ref=r22_r1_r2",
          "type": "external"
        }
      },
      "meta": {
        "paramsInfo": {
          "menu": "main"
        },
        "params": {}
      },
      "name": "examplemenucomponent",
      "label": "Example Menu component",
      "type": "container-item",
      "componentClass": "org.hippoecm.hst.component.support.bean.dynamic.MenuDynamicComponent",
      "models": {
        "menu": {
          "$ref": "/page/uid6"
        }
      }
    },
    ...
    "uid6": {
      "type": "menu",
      "links": {},
      "meta": {},
      "data": {
        "name": "main",
        "siteMenuItems": [
          { 
            "depth": 0, 
            "repositoryBased": false, 
            "properties": { 
              "hst:referencesitemapitem": "root"
            }, 
            "name": "Home", 
            "parameters": {}, 
            "childMenuItems": [], 
            "links": { 
              "site": { 
                "href": "/", 
                "type": "internal" 
              } 
            } 
          },
          { 
            "depth": 0, 
            "repositoryBased": false, 
            "properties": {
              "hst:referencesitemapitem": "contact", 
            }, 
            "name": "Contact", 
            "parameters": {}, 
            "childMenuItems": [ 
              { 
                "depth": 0, 
                "repositoryBased": false, 
                "properties": {
                  "hst:referencesitemapitem": "contact/about-us"
                }, 
                "name": "About us", 
                "parameters": {}, 
                "childMenuItems": [], 
                "links": { 
                  "site": { 
                    "href": "/contact/abous-us", 
                    "type": "internal" 
                  } 
                } 
              }, 
              { 
                "depth": 0, 
                "repositoryBased": false, 
                "properties": { 
                  "hst:externallink": "http://www.example.com" 
                }, 
                "name": "Locations", 
                "parameters": {}, 
                "childMenuItems": [], 
                "links": { 
                  "site": { 
                    "href": "http://www.example.com", 
                    "type": "external" 
                  } 
                } 
              } 
            ], 
            "links": { 
              "site": { 
                "href": "/contact", 
                "type": "internal" 
              } 
            } 
          }, 
          {
            "depth": 0,
            "repositoryBased": false,
            "properties": {
              "hst:referencesitemapitem": "search"
            },
            "name": "Search",
            "parameters": {},
            "childMenuItems": [],
            "links": {
              "site": {
                "href": "/search",
                "type": "internal"
              }
            }
          }
          ...
        ]
      }
    }
  }
}
Share Feedback
Page: /frontend/standard-components/dynamic-menu-component
Section: Frontend
Category *
Dynamic Menu Component | Bloomreach Content Documentation