Navigation is a fundamental component for a website and sometimes it becomes the key for success or failure. There are a lot of specialized sources where you can find information about websites navigation and usability. Just type "website navigation" in Google and you will find almost 400K results.

There are three different approaches to implement navigation on Jahia xCM projects:

  1. Simple navigation using the "Navigation Menu" component
  2. Custom navigation using the "Navigation Menu" component
  3. Custom navigation using the "Navigation Menu - JCR Query" component

Navigation Menu

This component is located under "Site Components" category. This is the easiest, most basic way to build your website's navigation used in most Jahia xCM projects. The way it works is really simple. Just build a navigation menu based on the project pages structure.

Lets see an example for that, if the project structure looks like this:

 

Then the navigation component will use the tree structure of the project pages and the resulting menu will be composed by the entire tree nodes structure or by a sub tree. The behavior of the component can be configured using the following parameters:

  • Baseline Node: This is the root node for the navigation menu. This means all the content under this node will be able to be displayed on the menu.
  • Max depth: This is a positive integer value that indicates how many levels under the root node the navigation component will be used to build the menu.
  • Start level: This is a positive integer value that indicates the specific level under the root node that will be used to start building the menu items.
  • View of the menu items: This is the specific view to be used to render each item of the menu. On this component by default only "menuElement" view is available. To get more info about what a view is on Jahia xCM check the documentation.
  • Style: This is the name of the CSS style that will be used on the resultant menu HTML content. This is optional.
  • Unique DIV: This is the value to be used for the ID attribute of a DIV tag that will be the container for the entire menu HTML content. This is optional.

Simple navigation using the "Navigation Menu" component

If we use the following values for the navigation component: baseline node = Home, max depth = 1, start level = 0, style = navigation; we should see an HTML content like this one:

 

Then with help of a good CSS style sheet we will be able create a simple navigation menu for our website.

Custom navigation using the "Navigation Menu" component

On the previous sample a simple navigation menu will be fine until some specific requirement occurs. If you have previous experience working on websites, you're aware of this: sometimes additional requirements can appear mid-porject which mean you need to make changes to the entire project.

To illustrate a custom navigation requirement lets use the same project structure of the previous sample, but this time we need to hide a specific page from the navigation menu: "testpage". Though there are several ways to do this, it is always recommended that you follow Jahia best practices.

Looking into the sample projects you will find this pattern used on the ACME-SPACE provided project with the Jahia xCM.

To satisfy this requirement using the navigation component, we will need to add a second navigation component to the project. This second navigation component will be called "hidden navigation" or something similar and will be used to hide the pages from the navigation menus build using the navigation component.

All the pages on Jahia xCM have a specific feature called "XYZ" that let you choose on which specific navigation menu the page should display. So if we want to hide a page from all the navigation menus, we will select the hidden menu for that page, otherwise we will select just the navigation menus where you want the page to be visible.

Lets see the configuration of the "test-page":

And the result of this should be something like this:

The navigation of the upper menu has all the pages but "test-page", and the hidden menu at the bottom (visible for illustration) has all the pages including "test-page".

Custom navigation using the "Navigation Menu - JCR Query" component

The previous example showed a pattern based on basic navigation component features and a specific page feature. This will be useful on some few scenarios but we still need to satisfy some more complex requirements on real website projects.

For more complex projects, one of the more powerful features of the Jahia xCM technology comes into play: JCR queries. On a previous post I talked about JCR Query languages (link to previous post), and now we're going to use a component called "Navigation Menu - JCR Query".

This component uses a JCR query to build the list of JCR nodes (pages in our requirement), and build the HTML content of the navigation menu. Let's see the configuration sample for this component:

The result of this component will look like this:

 

Depending on the complexity of your project, one of these three navigation approaches should be suitable for your Jahia site.