Base Menu Component

Component ID

The Base Menu Component is defined in the base component group by the ID:

base/menu

Purpose

This component provides all of the functionality of the Base Component and extends it to render the contents of a single selected menu tree.

Component Parameters

Name TypeDefault valueDescription
*(Any other than contentpath)-Parameter name and value will be rendered via the Delivery API's Pages endpoint.
*contentpath-This component will process all parameters of this type, lookup the referenced document by its path, and include its content in the Delivery API's Pages endpoint response. If the path references any node other than a document, only the path itself will be rendered.
menuString-The name of a single menu within the current channel. This field is rendered via a dropdown in the Experience manager, which is out-of-the-box configured to use a specific ValueListProvider when populating its values, namely it uses the menu-list-provider.  This provider populates the dropdown with the available menus from the preview channel.

Below you can see how the Base Menu Component renders its output in the JSON response of the Delivery API's Pages endpoint. The menu that this component has been configured to use is referenced inside the models/menu object, and shown as well in the example below. This example menu has the following structure, as reflected in the response json as well:

  • 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/about-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"
              }
            }
          }
          ...
        ]
      }
    }
  }
}

Did this page help you?