Configure the Navigation Menu - Enterprise Java Content management system - Hippo CMS

Configure the Navigation Menu

Previous Step

Configure the About page

With the home page, the news page and the about page in place, it's time to configure the navigation menu. At this point it's still exactly as it came out-of-the-box and not in sync with the actual pages you configured. There is a "content" menu item that you don't want, and there is no menu item for the About page.

Configure the Menu in the Channel Manager

In Hippo CMS, open the Channel Manager and select your web site.

Click on the Show components icon in the top right corner. An Edit menu button will appear at the top right of the page header.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.0/configure-the-navigation-menu/edit-menu-button.png

Click on the Edit menu button. An editor will appear in which you can configure the menu items.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-11.0/configure-navigation-menu/menu-editor.png

Select the "home" menu item and change its name to "Home".

Select the "news" menu item and change its name to "News".

Select the "content" menu item and delete it.

Add a new menu item by clicking on the + icon in the bottom right corner.

Enter the title "About". Select Internal Link. In the Internal Link field, click on Select. In the Select internal link dialog, select Documents in the dropdown, browse to the About document, and click OK.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/configure-the-navigation-menu/menu-select-internal-link.png

The Internal Link field will show "about" (the relative URL for the About page) as value.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-11.0/configure-navigation-menu/new-menu-item-about.png

Click on Save and close the menu editor by clicking on the arrow in the top left corner. You should now see the three menu items as you configured them in the channel preview.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.0/configure-the-navigation-menu/about-menu-item.png

Publish you changes to update the 'live' website.

Load the website in your browser:  http://localhost:8080/site/.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-1/navigation-menu/navigation-final-result.png

Next Step

Configure the Search Page

Configure the Navigation Menu

Previous Step

Configure the About page

With the home page, the news page and the about page in place, it's time to configure the navigation menu. At this point it's still exactly as it came out-of-the-box and not in sync with the actual pages you configured. There is a "content" menu item that you don't want, and there is no menu item for the About page.

Configure the Menu in the Channel Manager

In Hippo CMS, open the Channel Manager and select your web site.

Click on the Show components icon in the top right corner. An Edit menu button will appear at the top right of the page header.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.0/configure-the-navigation-menu/edit-menu-button.png

Click on the Edit menu button. An editor will appear in which you can configure the menu items.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-11.0/configure-navigation-menu/menu-editor.png

Select the "home" menu item and change its name to "Home".

Select the "news" menu item and change its name to "News".

Select the "content" menu item and delete it.

Add a new menu item by clicking on the + icon in the bottom right corner.

Enter the title "About". Select Internal Link. In the Internal Link field, click on Select. In the Select internal link dialog, select Documents in the dropdown, browse to the About document, and click OK.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/12.5/configure-the-navigation-menu/menu-select-internal-link.png

The Internal Link field will show "about" (the relative URL for the About page) as value.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-11.0/configure-navigation-menu/new-menu-item-about.png

Click on Save and close the menu editor by clicking on the arrow in the top left corner. You should now see the three menu items as you configured them in the channel preview.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-12.0/configure-the-navigation-menu/about-menu-item.png

Publish you changes to update the 'live' website.

Load the website in your browser:  http://localhost:8080/site/.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-1/navigation-menu/navigation-final-result.png

Next Step

Configure the Search Page