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:
- Simple navigation using the "Navigation Menu" component
- Custom navigation using the "Navigation Menu" component
- Custom navigation using the "Navigation Menu - JCR Query" component
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.
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.
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".
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.