Navigation

Navigation refers to those elements in the User Interface (UI) that allow users to reach specific places on the web service — dedicated navigation components, embedded navigation behavior into content, and platform affordances.

Lateral Navigation

Lateral navigation refers to moving between screens of the same level of the hierarchy. This thing is tricky in Valamis so let’s dig into some of the details. 

Platform Lateral Navigation

Firstly, we have lateral navigation on the LXP level. To support this navigation we use Product menu

The product menu is the main navigational element in Valamis LXP. It makes possible navigation to any top-level section of Valamis from any place in the system. By the left, you can see the Product Menu itself. All of the items on the menu are top-level destinations in Valamis LXP.


Each item represents its own destination. The exception (at the moment) is the expandable item. Expandable items serve as enclosures for groups of different destinations in the platform and help to categorize the items so that the menu doesn’t look like a skyscraper.

Lateral navigation within Valamis application (portlet)

From the architecture point of view Valamis is a system of many applications running Liferay platform.

We are using the Product Menu for the LXP-level navigation only. 

For big portlets like Lesson Viewer or Learning Paths we use another element to support lateral navigation — Tabs

In this picture Tabs are shown in the red box

Tabs element is an appropriate choice if there are 3 to 5 destinations.
This lateral navigation allows moving between sections of a portlet (within an app) while staying in the same section of the LXP.
Another bunch of top-level destinations is stored in the Valamis Header which is this

Search Results, Messages, Saved, Notifications, Shopping Cart and User Profile are all the same level destinations as the ones from the Product menu, but we keep them in the header for these two reasons:

1. These functionalities provide global LXP services rather than a certain section in the platform Information Architecture

2. These features should be always easiest to reach within a single click from anywhere so header provides a good shortcut to them

Forward navigation

While lateral navigation uses dedicated navigation components, forward navigation is often embedded into a screen’s content through a variety of components. Forward navigation can be implemented using:

  • Content containers such as cards, lists, or image lists
  • Buttons that advance to another screen
  • In-app search on one or more screens
  • Links within content

Forward navigation refers to one of three types of movement between screens to complete a task:

  • Downward in an app’s hierarchy to access deeper content, from a parent screen (higher level of hierarchy) to a child screen (lower level)
    Learning Paths portlet → Single Learning path

  • Sequentially through a flow, or an ordered sequence of screens, such as a checkout process, or say, thru pages of a lesson.

  • Directly from one screen to any other in the LXP, such as from a home screen to a screen deeper in Valamis hierarchy
    Dashboard → Single Training Event

Backward navigation

Backward navigation refers to going back in reverse order through a user’s history of recently viewed screens. This type of navigation is typically provided by the operating system or browser.

Back button in the browser returns users to their prior screen. That should retain position and state, such as vertical scroll position, to speed up information recall and task resumption. 

There’s always a however

The arrow might seem redundant since it duplicates the functionality of the browser button, but in fact it’s helpful. There are multiple cases when the browser is invisible, like in the fullscreen mode or on mobile where browsers usually hide their UI. In such cases blue dedicated arrow inside the application creates affordance, so it’s easier to user to orient in the system 

Upward Navigation

Upward navigation is going up in the hierarchy. We have mono hierarchy only in the individual portlets, so it’s worth mentioning once again that the only possible scenario to use breadcrumbs in Valamis is within individual portlets, that have their own internal hierarchy.

Breadcrumbs not only make it possible to go to the parent page but also even before clicking makes it possible to figure out the hierarchy and get a sense of a bigger context. 

Moving back in the browsing history can be at the same time moving up in the hierarchy, and in most of the cases it is so. Moving up in the hierarchy clicking the breadcrumbs is always moving forward in the browsing history so it is considered as direct forward navigation.