close

Filter

loading table of contents...

Frontend Developer Manual / Version 2301

Table Of Contents

6.4.12 Example Navigation

The navigation brick provides a navigation that allows the user to browse through the site. It is capable of rendering links to content pages, commerce categories or any other suitable CMTeasable implementations.

Note

Note

Most subtypes of CMCollection are supported but they will be rendered particularly. If a collection does not have a teaser title or if it returns only one content then it is handled transparently. The navigation then shows the containing content at the level of the collection instead of a level below.

The navigation displays a configurable number of navigation levels and will be rendered as an overlay menu or as an additional menu below your site's header toolbar. The default depth of the navigation is set to 3 levels. If you want to have additional levels you might need to add appropriate styling as the example only contains styling for the default depth.

Wireframe for navigation on desktop

Figure 6.23.  Wireframe for navigation on desktop


Wireframe for navigation on mobile

Figure 6.24.  Wireframe for navigation on mobile


  1. The Navigation title inherits its name and link destination from its active navigation level 1

  2. On mobile: the navigation can be accessed through the hamburger menu.

  3. On mobile: if the navigation contains more than one level, a caret icon appears next to the entry

  4. Picture can be set in Studio

Technical Description

The navigation can be displayed by including the Page with the navigation view.

  <header>
    ...
    <ul>
      ...
      <@cm.include self=cmpage view="navigation" params={
        "cssClass": "custom-styled-navigation"
      }/>
      ...
    </ul>
    ...
  </header>

You can also use the following settings as parameters in your include to apply additional styles and adjust the behavior of the navigation:

  • Page.navigation.ftl

Parameter Type Default Description
cssClass String "" An additional CSS class that will be added to the Navigation.
childrenCssClass String "" An additional CSS class that will be added to the children of the Navigation.
showPicturesInNavigation Boolean true Set to false to hide pictures of CMTeasables and Catalog Categories in the Navigation.

Table 6.14. Parameters of the Navigation


To make the navigation appear when a certain header placement is loaded, you can also include the PageGridPlacement.asNavigationHeader.ftl example, which is part of the brick. A closer look inside this template can also provide insight on how to use the navigation in your own templates. The following example shows an excerpt of a PageGridPlacement.ftl, which includes the navigation:

  <#if self.name! == "header">
    <@cm.include self=self view="asNavigationHeader"/>
  <#else>
    ...
  </#if>

The maximum depth of the navigation can be changed via setting navigation_depth.

Known Limitations

There are basically no limitations in terms of how an editor can build a navigation in the repository. The navigation brick cannot cover all these cases. The following list describes the most obvious limitations:

  • When content appears multiple times in the navigation and it is selected by the website user, all occurrences are highlighted as active.

  • Active items cannot be properly highlighted when nesting collections and pages. For example, when linking from a collection to a page which is already part of the navigation, most likely not all levels will be highlighted as active up to the currently selected page.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.