Frontend Developer Manual / Version 2201
Table Of Contents
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
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.
The Navigation title inherits its name and link destination from its active navigation level 1
On mobile: the navigation can be accessed through the hamburger menu.
On mobile: if the navigation contains more than one level, a caret icon appears next to the entry
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.
