How to build a multi-level menu and display it on the front end using the AnQiCMS navigation list tag (`navList`)?

The navigation system of the website is the core bridge for users to interact with content, especially for sites with rich content or deep hierarchy, a clear and efficient multi-level menu is crucial. AnQiCMS provides a powerful and flexible navigation list tag (navList), you can easily build and display a multifunctional multi-level menu.

Make full use of AnQiCMS' navigation function, we need to start from the background configuration, then to the rendering of the front-end template, and step by step build the menu structure we desire.

One, background navigation configuration: lay the foundation for multi-level menus

In the AnQiCMS management backend, navigation settings are the first step in building a multi-level menu. You can find the relevant options under 'Backend Settings' -> 'Navigation Settings'.

First, you can create different navigation categories, such as main navigation, footer navigation, or sidebar navigation, which allows you to define independent menu systems for different areas of the website.By default, the system will provide a category named "default navigation".

After selecting or creating a navigation category, you can add specific navigation links. Each navigation link can set the following key information:

1. Display name and subtitle:This is the text displayed on the front-end menu item, you can set the main title and the auxiliary subtitle as needed.
2. Parent navigation:This is the core of implementing multi-level menus. When you add a new navigation link, you can select its 'parent navigation'.If you select 'Top Navigation', it will become a top-level menu item.If you select an existing first-level menu item, the current link will become a second-level menu under it.AnQiCMS back-end currently supports the configuration of up to two-level navigation links, that is, the first-level menu and its first-level sub-menu.
3. Link Type:AnQiCMS provides flexible link types, including "built-in links" (such as home page, article model home page), "category page links" (linked to specific articles or product categories, single pages), and "external links" (pointing to any URL). When you need to link the navigation item to a specific category or page, the corresponding ID (PageId) will be saved, which is very useful when dynamically loading content on the front end.
4. Display order:By adjusting the display order, you can control the arrangement of menu items at the same level, with smaller numbers appearing earlier.

With these settings, you can create a hierarchical menu structure intuitively in the background, for example:

• Home
• Product Center
  • Product Category A
  • Product Category B
• Solution
• About Us

These backend configurations are completed, and then you need to display them on the website through front-end template tags.

Part two: Front-end template rendering: usingnavListTags to display the menu

In the AnQiCMS template file,navListThe tag is used to render the navigation list. It can read the menu data configured in the background and provide it to the template in a structured manner for iteration and display.

navListThe basic usage is as follows:

{% navList navs %}
    {# 菜单项的HTML结构将在这里循环输出 #}
{% endnavList %}

here,navsIs a custom variable name that will contain all the background configuration navigation data.navListThe tag must be paired, and the code block in the middle will iterate over each navigation item.

navsA variable is an array object, and each array element (which we usually callitemAll represent a navigation link. EachitemThe object contains the following common fields:

• item.Title: Display name of the navigation item.
• item.Link: Link address of the navigation item.
• item.IsCurrent: Boolean value, if the current page matches the navigation itemtrue, it can be used to highlight the current active menu.
• item.NavList:The key point!This is a nested array, if the currentitemThere is a submenu,item.NavListwhich will include these submenu items. The structure of each submenu item is consistent with the parent levelitemSame.

Based on these fields, we can build a basic two-level menu structure:

<nav class="main-navigation">
    <ul>
        {% navList navs %}
            {%- for item in navs %}
                <li {% if item.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ item.Link }}">{{item.Title}}</a>
                    {%- if item.NavList %} {# 判断是否有子菜单 #}
                        <ul class="sub-menu">
                            {%- for subItem in item.NavList %}
                                <li {% if subItem.IsCurrent %}class="active"{% endif %}>
                                    <a href="{{ subItem.Link }}">{{subItem.Title}}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

In the code above, we first use{% navList navs %}Retrieve top-level navigation data. Then, through{% for item in navs %}Loop through each first-level menu item. Inside each first-level menu item, we check{% if item.NavList %}Does a submenu exist. If it does, use a nested{% for subItem in item.NavList %}loop to render secondary menu items.item.IsCurrentproperty to help us add a menu item for the current page.activeClass, so that style highlighting can be performed.

Third, expand the depth of the multi-level menu: dynamically load content.

AlthoughnavListThe tag itself supports the configuration of two-level menus in the background, but by combining other content tags, we can realize a deeper level of menu display in the front-end visually, for example, dynamically listing the document list under the category of a second-level menu item, or further displaying the third-level category.

Here are some common multi-level menu expansion scenarios:

1. Display the document list of the category under the second-level navigation

Assuming you have configured a primary navigation "Product Center" in the background, under which there are two secondary navigations "Product Category A" and "Product Category B", and these secondary navigations are associated with specific category IDs (inner.PageId). You may want to see the latest product list under the category 'Product Category A' when the mouse hovers over it.

<ul>
    {% navList navList with typeId=1 %} {# 假设typeId=1是主导航 #}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %} {# 如果有一级子菜单 #}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId %} {# 检查子菜单项是否关联了分类/页面ID #}
                    {# 使用 archiveList 标签，根据 inner.PageId（分类ID）获取文档列表 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                    {% if products %} {# 如果该分类下有产品 #}
                        <ul class="nav-menu-child-child"> {# 视觉上的三级菜单 #}
                            {% for product in products %}
                            <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

In this example, we are in the first-level submenu (innerinside, checkinner.PageIdWhether it exists (i.e., whether the navigation item is associated with a category or page). If it exists, we will usearchiveListLabel, based oninner.PageIdGet the latest document (product) list under this category, thus visually building a three-level menu effect.

2. Display the sub-categories under the second-level navigation.

Another common requirement is that the second-level navigation item itself is a parent category, and you want to expand it to display all its subcategories below.

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId > 0 %} {# 同样检查是否关联了分类ID #}
                    {# 使用 categoryList 标签，根据 inner.PageId 获取其下级分类 #}
                    {% categoryList categories with parentId=inner.PageId %}
                    {% if categories %} {# 如果存在下级分类 #}
                    <ul class="nav-menu-child-child"> {# 视觉上的三级菜单 #}
                        {% for subCategory in categories %}
                        <li>
                            <a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

This example is similar to the previous one, but it uses nesting within the second-level menu.categoryListTag to get and display all the subcategories of the second-level menu items as the parent category.

Summary

Through AnQiCMS'snavListLabel, combined with flexible backend navigation configuration, as well as in the front-end templateifJudgment,forloop andarchiveList/categoryListWith other content tags, you can easily build a powerful, hierarchical multi-level website navigation system. This also improves the organization of website content.