How to construct a website navigation with multi-level submenus and associated content using the `navList` tag?

When building a website, a clear and easy-to-use navigation system is crucial, as it directly affects whether users can quickly find the information they need and also influences the search engine's understanding of the website structure. AnQiCMS provides powerfulnavListLabel, allowing us to flexibly build a navigation system containing multi-level sub-menus and closely associating navigation items with website content.

Next, we will delve into how to utilizenavListLabel, create a set of multi-level navigation that is both beautiful and practical for your website.

The basics of website navigation: start from the backend settings

Before starting the template level work, we need to lay the foundation for the navigation system in the AnQiCMS backend.The AnQiCMS backend provides a 'Navigation Settings' feature, where you can define the entire navigation structure of the website.

Firstly, there is "Navigation Category Management". This allows you to create navigation areas with different names, such as "Top Main Navigation", "Footer Navigation", "Sidebar Navigation", and so on.This way, you can customize a dedicated navigation menu for different locations according to the needs of the website layout, each menu can be accessed through atypeIdto identify.

Next is the "navigation link settings", this is the place where specific menu items are composed. Here, you can add navigation links and choose their type:

• Built-in linkFor example, the home page of the website, the home page of the article model, the home page of the product model, etc., these are all commonly used entry points preset by the system.
• Category/single page link: You can directly select the article categories, product categories, or independent single pages that have been created in the background as navigation targets.This is very critical as it provides a bridge for us to associate more content in the template later.
• External linkIf you need to link to external resources or a custom internal URL, you can choose this type.

In the background, each navigation link can be set to have up to two levels of hierarchy, that is, a main navigation item can have a sub-navigation item.Each navigation item includes information such as "Display Name", "Subtitle Name", "Navigation Description", and "Link Type", and can be sorted by "Display Order".

UnderstandingnavListThe core mechanism of tags

Once the navigation structure is set up on the backend, we can use it in the template.navListTag to call this data.navListThe usage of tags is as follows:

{% navList navs %}
    {# 循环输出导航项 #}
{% endnavList %}

here,navsIt is the variable name we define for the navigation list, you can name it according to your own habits.navListThe label supports several important parameters:

• typeId: Corresponds to the navigation category ID defined in the background "Navigation Category Management". By specifyingtypeId, you can accurately call different menu groups such as top navigation, footer navigation, etc. For example,{% navList navs with typeId=1 %}The navigation category with ID 1 will be called.
• siteIdIf you manage multiple sites and want to call data from a specific site, you can do so by:siteIdParameter to achieve.

In{% for item in navs %}In the loop, eachitemObjects contain the following useful fields:

• Title: The display name of the navigation item.
• SubTitle: The subtitle name of the navigation item.
• Description: The description of the navigation item.
• Link: The link address of the navigation item.
• IsCurrent: A boolean value indicating whether the current navigation item corresponds to the page the user is visiting, commonly used to set highlight styles.
• NavList: If the current navigation item has child navigation, this field will contain an array whose structure is the same as the parent.itemThe same, convenient for us to nest loops to build multi-level menus.
• PageId:This is a very important fieldWhen the navigation item links to the "category page link" or "single page link" of the background,PageIdIt will store the ID of the category or single page. It is the key to achieving deep association between navigation and content.

Build a navigation with multi-level sub-menus.

AnQiCMS backend directly supports the configuration of two-level menus. In the template, we can achieve this two-level menu display through nested loopsitem.NavListto easily implement this two-level menu display:

<ul>
    {% navList navs with typeId=1 %}
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断是否有子菜单 #}
            <dl>
                {%- for inner in item.NavList %}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
    {% endnavList %}
</ul>

This code first loops through the first-level navigation items, if a first-level navigation item is not empty,item.NavListit will continue to loop through its child navigation items, forming a standard two-level dropdown menu.

Linked content to achieve more flexible navigation

PageIdThe introduction of fields greatly expandsnavListThe function of tags. Although the background only directly supports two-level menus, but throughPageIdWe can dynamically call more related content based on the category or single page ID associated with the secondary menu item, thus achieving a complex effect of multi-level menus visually, or directly displaying the content list in the menu dropdown area.

Scenario one: Display more subcategories under the second-level menu (simulating a third-level menu)

Assuming your secondary navigation item is associated with an article category, and this category has more subcategories. You can useitem.PageIdCombinecategoryListThe label, dynamically pulling and displaying these third-level categories in the template.

<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 %} {# 检查二级菜单项是否关联了分类 #}
                    {% categoryList categories with parentId=inner.PageId %} {# 调用该分类的子分类 #}
                    {% if categories %}
                    <ul> {# 三级分类容器 #}
                        {% for subCategory in categories %}
                        <li>
                            <a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

In this code block,inner.PageIdascategoryListofparentIdThe parameter precisely specifies which subcategory of the category to retrieve. This way, even if the backend has not directly configured the third-level navigation, we can dynamically present it through the template logic.

Scenario two: Directly associate and display document/product list under the second-level menu

You can also choose to display the latest articles or hot products directly under the associated category in the dropdown area of the secondary menu item, rather than just displaying the subcategories.This is very practical for content display websites, such as e-commerce or information portals.

<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 %} {# 检查二级菜单项是否关联了分类 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的最新8篇文档/产品 #}
                    {% if products %}
                    <ul class="nav-menu-child-content"> {# 内容列表容器 #}
                        {% for productItem in products %}
                        <li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

We use here,inner.PageIdasarchiveListofcategoryIdParameters, retrieved document or product list associated with the second-level menu item category from the background. Bylimit="8"Can control the number of displays,type="list"then