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 ...