The first menu item has been converted to a popup menu containing two more menu items (note again the repeating config/widgets/config/widgets pattern). Now add some icons to the menu items, do some grouping and add a cascading menu. Try this model in your JavaScript controller:
model.jsonModel = {
widgets: [{
name: "alfresco/menus/AlfMenuBar",
config: {
widgets: [
{
name: "alfresco/menus/AlfMenuBarPopup",
config: {
label: "One",
widgets: [
{
name: "alfresco/menus/AlfMenuGroup",
config: {
label: "Group 1",
widgets: [{
name: "alfresco/menus/AlfMenuItem",
config: {
label: "Popup item 1",
iconClass: "alf-edit-icon"
}
},{
name: "alfresco/menus/AlfCascadingMenu",
config: {
label: "Popup item 2",
iconClass: "alf-cog-icon",
widgets: [
{
name: "alfresco/menus/AlfMenuItem",
config: {
label: "Cascaded menu item 1",
iconClass: "alf-leave-icon"
}
},{
name: "alfresco/menus/AlfMenuItem",
config: {
label: "Cascaded menu item 2",
iconClass: "alf-help-icon"
}
}]
}
}]
}
},{
name: "alfresco/menus/AlfMenuGroup",
config: {
label: "Group 2",
iconClass: "alf-logout-icon",
widgets: [{
name: "alfresco/menus/AlfMenuItem",
config: {
label: "Popup item 3",
iconClass: "alf-profile-icon"
}
}]
}
}]
}
},{
name: "alfresco/menus/AlfMenuBarItem",
config: {
label: "Two"
}
}]
}
}
]};
When the web scripts are refreshed and the page is reloaded you will see a page displaying a menu with lists, cascaded menus and icons.