How to flexibly construct and display the top, side, or bottom navigation menu of a website using the `navList` tag?

When building a website with comprehensive functionality, a clear and intuitive navigation menu is undoubtedly one of the core elements of user experience. AnQiCMS provides powerful and flexible functionality.navListTags, allowing users to easily create and manage the top, side, or bottom navigation menus of the website, meeting different layout and content display needs.

navListBasic usage of tags

navListThe tag is a key tool in the AnQiCMS template engine used to obtain the website navigation list. Its basic usage is very intuitive, usually with an opening tag{% navList 变量名 %}Start, containing items for navigation iterationforLoop and close the tag{% endnavList %}End. For example, we can name the navigation list obtained asnavs:

{% navList navs %}
    {# 在这里使用 for 循环遍历 navs 中的每个导航项 #}
{% endnavList %}

This tag supports two main parameters to accurately control the navigation content you want to display:

• typeId(Navigation list ID): This is a core parameter used to specify the navigation menu category you want to call.In the AnQiCMS backend settings, you can create multiple navigation categories, such as 'main navigation', 'footer navigation', 'sidebar navigation', and so on.typeIdThe value is1Corresponds to the default navigation in the background. If you have created other navigation categories, simply settypeIdto the ID of the corresponding category to call the navigation menu of that category.
• siteId(Site ID): If you are using the multi-site management feature of AnQiCMS and want to call navigation data from other sites in the current site's template, you can specifysiteIdTo implement the parameter. For single-site users, this parameter is usually not set.

Deconstruct the navigation items: understand their internal data

InnavListwithin the tag,forIn the loop, each one visited.itemRepresents a navigation link, it contains all the information needed to build a rich menu. Understanding these fields will help you finely control the display of the navigation menu:

• Title(Navigation Title)This is the display name of the navigation link, which is the text seen by the user in the menu.
• SubTitle(Subheading): If your design requires additional subtitles or auxiliary description text for navigation items, you can set this field in the background and call it in the template.
• Description(Navigation description)Used to provide more detailed description information for navigation items, which can be used for hover tips or more complex layouts.
• Link(Navigation link): The target URL of the navigation item.In the background, you can flexibly select link types, including built-in links (such as home page, model home page), category page links, or any external links.
• PageId(Corresponding category ID)If the navigation item is linked to a category page, this field will contain the ID of that category. This is very useful when you need to get more related content based on the navigation item.
• IsCurrent(Is the current link)This is a boolean value used to determine whether the current navigation item corresponds to the page the user is visiting.Use this property to easily add a highlight style to the corresponding menu item on the current page, enhancing the user experience.
• NavList(Sub-navigation list)This isnavListTags are the key to implementing multi-level menus. If a navigation item has a submenu under it,NavListIt will be an array containing these sub-menu items, with the same structure as the top-level navigation item.AnQiCMS supports navigation links up to two levels, that is, there can be a sub-menu level under the main menu item.

Building a diverse navigation structure

MasterednavListAfter the label parameters and navigation item fields, you can flexibly build various navigation structures.

1. Main navigation, sidebar navigation, and bottom navigation

The most common use case is to create the main navigation of a website. Typically, the main navigation uses the defaulttypeId=1.If your website needs multiple independent navigation areas, such as a main navigation at the top of the page, a product category navigation on the side, and a friendship link or about us navigation at the bottom, you can create different navigation categories in the AnQiCMS backend navigation settings.typeId. Then, in the template, you just need to call the corresponding navigation list bytypeIdthe parameter:

{# 顶部主导航 #}
<nav class="main-nav">
    {% navList mainNavs with typeId=1 %}
        <ul>
            {% for item in mainNavs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {# 处理二级菜单 #}
                    {% if item.NavList %}
                        <ul class="sub-menu">
                            {% for subItem in item.NavList %}
                                <li class="{% if subItem.IsCurrent %}active{% endif %}"><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endnavList %}
</nav>

{# 底部页脚导航 #}
<footer class="footer">
    {% navList footerNavs with typeId=2 %} {# 假设页脚导航的 typeId 为 2 #}
        <ul>
            {% for item in footerNavs %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
        </ul>
    {% endnavList %}
</footer>

2. Advanced Dropdown Menu: Integrated Content and Categories

navListThe power of tags is not only in displaying simple link lists, but also in being able to connect witharchiveList(Document list tag) andcategoryList(Category list tags) and other AnQiCMS tags combined to create a rich dropdown menu. For example, you can directly display the popular articles or product lists under the category menu item in the main navigation:

{# 假设这是一个产品分类导航，并在下拉菜单中展示产品 #}
<nav class="product-menu">
    <ul>
        {% navList productCategories with typeId=3 %} {# 假设产品分类导航的 typeId 为 3 #}
            {% for item in productCategories %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {# 如果该导航项链接到分类，并且有 PageId #}
                    {% if item.PageId > 0 %}
                        <ul class="product-dropdown">
                            {% archiveList products with type="list" categoryId=item.PageId limit="5" %}
                                {% for product in products %}
                                    <li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
                                {% endfor %}
                            {% endarchiveList %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

Similarly, if your navigation item is a parent category, you can display its direct subcategories in the drop-down menu:

`twig {# In the navigation dropdown menu, display subcategories #}