How to use AnQiCMS navigation list tags to display two-level or multi-level menu structures?

The operation of a website is like steering a ship, and a clear navigation system is like a compass guiding the way.In the world of content management, a highly efficient and flexible navigation menu can greatly enhance user experience, allowing visitors to navigate your website effortlessly, and is an important cornerstone for optimizing website structure and improving search engine friendliness.AnQiCMS (AnQiCMS) fully understands its path, providing users with a powerful and intuitive navigation list tag, making it easy to build a multi-level menu structure.

Today, let's delve into how to skillfully use in AnQiCMSnavListTags, easily create a two-level or multi-level menu structure that is both beautiful and practical.

AnQiCMS navigation system: lays the foundation for backend configuration

In AnQiCMS, the first step in building a multi-level menu is naturally to make detailed configurations in the background.The system provides the "website navigation settings" feature, allowing you to flexibly define the navigation links of the website according to your actual needs.

First, you will notice the "Navigation Category Management". This allows you to create different navigation areas, such as common "Top Navigation", "Footer Navigation", or "Sidebar Navigation".This classification management method is very practical, you can customize exclusive navigation content for different page areas without interference.

Next is the "Navigation Link Settings", this is where you actually build the menu hierarchy.When adding or editing navigation links, you need to set the "Display Name", "Link Type", and the most important "Parent Navigation".“Link type” is very rich, you can choose “Built-in link” (such as homepage, article model homepage), “Category page link” (related to specific article categories or single pages), or “External link” (pointing to any URL within or outside the site).

By reasonably selecting the 'parent navigation', you can easily build a two-level menu structure.For example, a first-level menu named "Product Center" can include second-level menus such as "Electronic Products", "Home Goods", and so on.Just set the 'Parent Navigation' of 'Electronics' to 'Product Center'.The backend design of AnQiCMS is very intuitive, usually you can directly configure two-level menus in this way, meeting the needs of the vast majority of corporate websites.

RevelationnavListTags: magic of front-end templates

After the background configuration is in place, the front-end template is the key to beautifully presenting the structured navigation data. AnQiCMS provides powerful features for this.navList.

navListThe tag is specifically used to retrieve and display the page navigation list, its basic usage is concise and clear. You would usually start your navigation code snippet like this:

{% navList navs %}
    {# 导航内容将在这里循环输出 #}
{% endnavList %}

Here, navsWe define the variable name for the navigation list data, you can name it according to your habits.navListThe tag also supports some parameters, such astypeIdIt allows you to specify which "navigation category" link to call. For example, if you create one in the background,typeIdyou can navigate to the "footer navigation" for 2 in the template.{% navList navs with typeId=2 %}Call it. Another parametersiteIdIt is used for multi-site management scenarios, allowing you to call data from specific sites.

InnavsIn this variable, each navigation item contains a series of available fields, such asTitle(Navigation title),Link(navigation link),IsCurrent(Determine whether it is a link on the current page, often used to highlight the active menu item) and a very critical field -NavList.

NavListThe presence of a field is the key to implementing multi-level menus. If a navigation item contains a sub-navigation, thenNavListIt will become an array containing these sub-navigation items. This allows us to perform nested loops in the template, thus displaying the menu structure layer by layer.

Implement a two-level menu structure

Now, let's go through a real code example to see how to make use ofnavListtags to elegantly display a two-level menu on the front end:

<nav class="main-navigation">
    <ul class="primary-menu">
        {% navList navs with typeId=1 %} {# 假设typeId=1是顶部导航 #}
            {% for item in navs %}
                <li class="menu-item {% if item.IsCurrent %}active{% endif %} {% if item.NavList %}has-submenu{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %} {# 检查是否有子导航 #}
                        <ul class="sub-menu">
                            {% for inner in item.NavList %}
                                <li class="menu-item {% if inner.IsCurrent %}active{% endif %}">
                                    <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

This code clearly demonstrates the construction logic of a two-level menu: First, the externalfor item in navsloop through all the first-level navigation items. Inside each first-level navigation item, we use{% if item.NavList %}Determine if it contains child navigation. If child navigation exists, use another nested loop.{% for inner in item.NavList %}To iterate and display all second-level navigation items.item.IsCurrentandinner.IsCurrentIt is used to add to the currently active menu item.activeclass, easy to highlight through CSS.

Advanced: Explore the display strategies of three-level or more menu.

The native 'Navigation Link Settings' of AnQiCMS supports the configuration of two-level menus directly, but by cleverly combining other content tags, we can fully realize the dynamic display of three-level or even more menu levels in the front-end template, thereby building a richer and more flexible navigation system.

The core idea is: to bind a certain item of the second-level menu with its associated 'content category' or 'content list', and then dynamically pull more hierarchical data through these content tags on the front-end.

For example, a typical application scenario is: First-level menu -> Second-level category menu -> The article list under this category (as the third-level menu). Or: First-level menu -> Second-level category menu -> The list of subcategories under this category (as a third-level menu).

Let us refertag-/anqiapi-other/165.htmlto the example to see how to implement such an advanced menu structure:

Scenario one: Display related product documents under the second-level category (as the third level)

Assuming your navigation backend is configured with 'Product Center' as a top-level menu, under which there is a 'Electronics' as a sub-menu, and this 'Electronics' sub-menu is associated with a product category ID.We hope that when clicking on 'Electronics', the popular products under this category will be displayed in the dropdown menu.

<ul class="main-menu">
    {% navList navList with typeId=1 %}
        {% for item in navList %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if item.NavList %} {# 一级菜单的子导航，即二级菜单 #}
            <ul class="sub-menu">
                {% for inner in item.NavList %}
                <li>
                    <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                    {% if inner.PageId > 0 %} {# 检查二级菜单是否关联了某个分类ID #}
                        {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 假设inner.PageId是产品分类ID，获取该分类下8个产品 #}
                            {% if products %} {# 如果有产品，则显示为三级菜单 #}
                            <ul class="tertiary-menu">
                                {% for product_item in products %}
                                <li><a href="{{ product_item.Link }}">{{ product_item.Title }}</a></li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                        {% endarchiveList %}
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    {% endnavList %}
</ul>

In this example,inner.PageIdIt represents the category ID associated with the secondary navigation link. We usearchiveListthe tag, tocategoryId=inner.PageIdas a condition to dynamically pull the product list under the category and display it as the third-level menu.

Scenario two: Display subcategories under the second-level category (as the third level)

If your requirement is to display a deeper level of categorization, for example, under the second-level menu of "Electronics", displaying more specific subcategories such as "Smartphones", "Laptops", and so on.

`twig

{% navList navList with typeId=1 %}
    {% for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {% if item.NavList %} {# 一级菜单的子导航，即二级菜单 #}
        <ul class="sub-menu">
            {% for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                {% if inner.PageId > 0 %} {# 检查二级菜单是否关联了某个分类ID #}
                    {% categoryList categories with parentId=inner.PageId %} {# 获取该分类ID下的所有子分类 #}
                        {% if categories %} {# 如果有子分类，则显示为三级菜单 #}
                        <ul class="tertiary-menu">
                            {%