Menus ...

  • can be dynamically organized & stored within Hublify-CMS,
  • can be used for primary (site) navigation,
  • can hold product-categories (PIM),
  • can be used for footer-link-lists, ...
  • ...

Define as many "menu"s as you like!

menu: "primary_navi"

This is the standardwise defined menu-label reserved for the primary navigation of a site.

Menu Data Query

To get the menu-data for a menu configured in Hublify you have to retrieve it from within your template. With a Hublify menu query you can load all the single entries and use those for rendering.

A typical menu data query looks like this:

{% set menuItems = hublify.menu('primary_navi').depth(1).all() %}

depth(...)

With this function you can specify the maximum depth-level of menu-items to be returned.

This is actually like a smaller-than-filter applied to the depth-field.

{% set menuItems = hublify.menu('primary_navi').depth(1).all() %}


sub(...)

Allows to get only the sub-tree of a given (parent-) menu-node-code.

Info: This supports also dynamic enriched nodes!

{% set menuItems = hublify.menu('primary_navi').sub('AllBelowThisNodeCode').all() %}


You can additionally combine this with the function: depth(...)

The given depth-value is then relatively used, meaning added to the depth-level of the found parent-node.

{% set menuItems = hublify.menu('primary_navi').sub('AllBelowThisNodeCode').depth(1).all() %}


Result: menu data-structure

The menu data is returned from Hublify CMS always as 1-dimensional array of objects. The result is not organized as nested object-structure. 

The benefit of this 1-dimensional structure is that you can nicely handle it with ONE for-loop. The downside is that, that it is partially little more complex to code the rendering-part. Don't worry! :) It's not that hard and we have some good examples for you!

Each menu-item can refer to an own target-type (a product-record, a page-label, a category-node, ...)

Fields

  • node_id
  • node_name
  • drvd_url_detail
  • p_label : If set, menu points to a page!
    Use hublify.pageLinkUrl(item.p_label) to get final url.
  • node_code: If set, menu points to a category page!
  • depth
  • lft
  • rgt
  • active : 0=disabled, 1=enabled (show/available)



Example template

An example how render a nested menu from the 1-dimensional menu-result.



{#
    simple navbar with dropdown for submenues (used in header and footer for now)
    expects nestedGroup style list with lft,rgt,depth etc.
    everything that is not a toplevel node will be displayed within a dropdown for the matching toplevel node

#}

{# ---- LOAD  menu ---------- #}
{% set data = hublify.menu('primary_navi').all() %}

{# ---- RENDER  menu ---------- #}
{% if data is not empty %}
   <ul class="nav nav-pills">
        {% set openDropDown = false %}
        <!-- header_menu -->
        {% for k,item in data %}
            {# get link for item #}
            {% if item.drvd_url_detail is not empty %}

                {%  set itemURL = item.drvd_url_detail %}
            {% elseif item.p_label is not empty %}
                {%  set itemURL = hublify.pageLinkUrl(item.p_label) %}
            {% elseif item.node_code is defined %}
                {%  set itemURL = hublify.categoryLinkUrl(item.node_code) %}
            {%  else %}
                {%  set itemURL ='' %}
            {% endif %}

            {% if item.depth > 0 %}
                {% set linkClass = "dropdown-item" %}
            {% else %}
                {% set linkClass = "nav-link" %}
                {% if openDropDown == true %}
                    {# close previous submenu #}
                    </ul></li>
                    {% set openDropDown = false %}
                {% endif %}
            {% endif %}
            {% if item.active == 0 %}
                {% set linkClass = linkClass ~ " disabled" %}
            {% endif %}
            {% if item.depth > 0 or item.rgt - item.lft == 1 %}
                {# no children #}
                <li class="nav-item"><a href="{{ itemURL }}" class="{{ linkClass }}">{{ item.node_name }}</a> </li>
            {% else %}
                {% set openDropDown = true %}
                <li class="nav-item"><a class="{{ linkClass }} dropdown-toggle" href="{{ itemURL }}" id="navbarDropdown{{ item.node_id }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ item.node_name }}
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown{{ item.node_id }}">
            {% endif %}
        {% endfor %}
        {% if openDropDown == true %}
            {# close previous submenu #}
            </ul></li>
        {% endif %}
    </ul>
{% endif %}


Breadcrumbs

Assembling a breadcrumb-path is just like ...