The Column Tree Navigation

Column navigation (Duplicate?) Column navigation (Duplicate?)

Keeping our priorities we would like to first wish you a happy new year! Continuing their work on the Sulu content management framework (SuluCMF) our developers have returned from their well-deserved Christmas holidays.

Prior to our short leave and in line with the release of the new navigational concept the column tree navigation has been successfully implemented into SuluCMF. This new component as displayed in Fig. 1 enables an intuitive navigation through a website structure. This is achieved by giving access to various nodes such as pages, sub pages, links and or other special type nodes which constitute the entire web space environment.

The innovative navigational concept is easily understood. A user clicks on an element of a column which is thereby selected and triggers its children to be loaded if they exist. As a result of this interaction a new column is added and populated with the children of an element.

Extending this SuluCMF core functionality, children of elements are editable individually or as a batch with the help of the options menu (gear icon) item below the currently active column. Each column has a dedicated options menu, which remains below an active column. This unique feature behavior allows a very dynamic editing process within the column view navigation. Items across the entire breadcrumb navigation can be easily added, modified or deleted, providing a seamless user experience.

Beyond options

Each node comes with several properties such as a title, an ID and the flag “hasSub” indicating existing children as well as groups of existing children. Furthermore nodes are able to possess a variety of characteristics indicated by the presence of icons. These properties are:

  • linked – internal and external: This property means that this node contains a link and if the links target is within one of the web spaces or outside.

  • published: This property informs the user if the node is already published and therefore accessible for visitors of the website or not.

  • type – ghost or shadow: The value ghost tells a user that this node structure is available but not in the current language (the displayed nodes are from another language). The shadow value tells the user that the content is linked to another language.

A sample for the general explanation of the characteristics of a node is shown below:

  "title": "Page 123",
  "id": "123",
  "hasSub": true,
  "linked": internal,
  "type": {
       "name": "ghost",
       "value: "us_en"
  "_links" : {
       "self" : "/workspace/1234/nodes/123",
       "children" : "/workspace/1234/nodes?parent=123&depth=1"
  "_embedded": []

API improvements

In order to further streamline the nodes API to enable this extended set of functionalities the following new parameters have been introduced:

  • parent With this parameter the starting point in the node tree can be set.

  • depth With this parameter the depth can be limited which means from the start point x levels of nodes will be returned.

  • flat With this parameter the type of the response can be set. True returns a flat list of nodes, false returns a tree of elements.

  • child With this parameter the depth of the tree can be limited. The response contains the tree of nodes from given children down to the root (limited by depth).

Further in-depth information in regards to the nodes API and its returning data can be found here. For your convenience a demo / example has been made available for you in this repository in the demos folder.


With the completion of this pivotal navigational component SuluCMF has taken a huge step towards the completion of its navigational system. We are delighted to announce that it is now possible to navigate through the web space content with SuluCMF.