Using Navigations and the Hierarchy Browser

Maintaining a navigation using the Web Builder comes down to creating or pasting pages directly where they are meant to appear: in the navigation itself. To get an understanding of how this works, we’re going to show you how the top navigation supports you with structuring a website based on the Web Builder.

After switching to editing mode, take a look at the top navigation to see what it can do for you.

The navigation is indicated by a blue handle at its top right corner. When hovering over it, a frame with blue borders enclosing the navigation items appears. The handle is in fact a button that opens a menu, when clicked. Using this menu’s commands, you can add, paste or move pages to the navigation, or sort its items.

Note that creating a page via the main menu’s “Create page” command does not add it to any navigation. It simply creates a stand-alone page, whereas the navigation’s “Add page” command makes the new page a sibling of the existing ones.

Let’s try this out: click “Add page” and select the “Page” type. This causes an “Untitled” page to be appended to the existing navigation items. You could now move the new page within the navigation by selecting “Sort items” from its menu.

To get an idea of how these blue bordered automatic navigations work, think of a single-parent family tree and call it page hierarchy. Every page created or managed using such navigations automatically becomes a direct or indirect descendant of the origin page and can have any number of sibling or child pages. The origin page is called “root” in the Web Builder, and since pages are content objects, the root actually is the root object, which most often represents the website’s homepage.

Now, if you take another look at the above navigation, picture its items as children of the root page. The Web Builder allows developers to insert such automatic child list navigations anywhere on the website, and, in this case, the parent used is the root page.

Just open the page you wish to move, select “Copy or move page” from the main menu at the top right, and then “Move page here” from the navigation’s menu. This way, i.e. by combining page-related commands from the main menu with commands from a navigation, you can move or copy pages within the same navigation or across different ones, turn them into subpages, etc.

As we’ve already touched on the page hierarchy above, let’s jump straight in and take a closer look at the Web Builder’s hierarchy browser. It provides you with an overview of your website’s structure and lets you conveniently click through the pages to inspect or adjust them individually.

Automatic child list navigations work on a subsection of the page hierarchy. To see what this means with respect to the top navigation, first select a page from the “About” submenu, then open the hierarchy browser (using the the corresponding button near the top of the sidebar).

In the hierarchy browser, the page you selected is highlighted and surrounded by the other items in the “About” submenu. The topmost item in the hierarchy is the root page with its child pages, just like in the top navigation. Using the arrow toggles on the left hand side, you can expand or fold in pages with subpages.

Selecting a page from the hierarchy panel navigates to that page and highlights the panel item, so that it is always clear which page you are inspecting. The panel’s contents is preserved while editing the page being viewed, so selecting several pages one by one is easy.

Every item on the hierarchy panel includes a menu button on the right-hand side that becomes visible when hovering over the item. When clicked, the menu pops up underneath the item. It lets you add a subpage, open the page properties, delete the page, copy it, and more.

[New in 1.24.0]You can also remove a page from the hierarchy (and thus from all automatic navigations) in case you want it to be a stand-alone page, e.g. a landing page. Note that the page must not have subpages for this option to be available. To move a stand-alone page back into the hierarchy, select “Copy or move page” from the main menu, and then “Move page here” from the menu of the navigation to which the page should be added.

The menu and its actions are available independently of whether a page has been selected or not, giving you a means to manage pages without losing focus of the selected page.

Last, but not least, click the ⓘ button at the top of the panel to hide (or display) details such as the page type or the date of the most recent change.