Magnolia 5.3 reached end of life on June 30, 2017. This branch is no longer supported, see End-of-life policy.

Page tree
Skip to end of metadata
Go to start of metadata

STK provides two navigation menus: horizontal and vertical. The horizontal menu displays the first two levels in the site hierarchy and the vertical menu displays the next two. The number of levels is configurable. The home page is a special case since it is displayed as the first item in the horizontal menu although it is higher in the site hierarchy. 

Navigation is configured in the template prototype. The prototype defines navigation menus for all pages.

Node nameValue

 default

 

 templates

 

 prototype

 

 navigation

 

 horizontal

 

 allOpen

false

 enabled

true

 level

1

 template

/templating-kit/pages/global/horizontalNavigation.ftl

 vertical

 

 allOpen

false

 enabled

true

 level

2

 startLevel

 2

 template

 /templating-kit/pages/global/verticalNavigation.ftl

Properties:

  • allOpen: Expands all available navigation levels when set to true. When set to false, new levels are expanded when the user clicks the links. 
  • enabled: Enables and disables the navigation menu.
  • level: Sets the depth of levels. Valid values for horizontal: 12. Valid values for vertical: 123. See the tip below.
  • startLevel: Depth level where navigation starts. Typically the vertical follows horizontal without level overlap. This property allows you to display the same level in both menus, for example.
  • template: Path to the template script. The vertical and horizontal nodes reference their own scripts.

Any concrete template definition can override the prototype configuration. This allows you to disable navigation menus on certain pages or display different levels.

You can set the navigation level to greater than 3 but you will run into CSS issues. To fix the broken layout, edit the main CSS sheet in STK > Resources /templating-kit/themes/pop/css/styles .

You can change the default 1 + 2 level configuration. For example, when you set the horizontal level to 2, the system displays hierarchy levels 1 (home), 2 and 3 in the horizontal menu. Levels below 3 are displayed vertically.

Default 1 + 2 configuration:

Custom 2 + 2 configuration:

Each navigation menu has its own template script which renders the menu HTML:

  • STK > Templates > /templating-kit/pages/global/horizontalNavigation.ftl
  • STK > Templates > /templating-kit/pages/global/verticalNavigation.ftl

Here's a snippet from the horizontal script.

horizontalNavigation.ftl
[#if model.navigation.showHorizontalNavigation]
    [#assign navigation = model.navigation.horizontalNavigation/]
    [#if (model.navigation.horizontalLevel >1 && navigation.selectedItem??) && (navigation.selectedItem.level>1 || !navigation.selectedItem.leaf)]
        [#assign cssClass = "class=\"plus-navsub\""]
    [/#if]
    <div id="nav-global" ${cssClass!} role="navigation">
        <div id="nav-global-box">
            <h6>${i18n['structural.navigation']}</h6>
            [@renderNavigation navigation=navigation/]
        </div><!-- end nav-global-box -->
    </div><!-- end nav-global -->
[/#if]

SiteNavigationModel exposes configuration made in the prototype and in concrete template definitions to the script.

3 Comments

  1. Is it ok to transform this navigation content node into a prototype.yaml as a root element, like:

    navigation:
      horizontal:
        allOpen: false
        enabled: true
        level: 1
        template: /presentation/pages/global/horizontalNavigation.ftl

    And please show also the main.ftl's related parts, as it is not clear how is this navigation called from there exactly.

  2. Hi

    Please note that you comment here on "Magnolia 5.3 documentation", which never was supporting YAML files, and which has reached its end of life.

    1. yes, sorry, missed that.