In the template development of AnQi CMS, building a functional and user-friendly navigation bar is one of the core tasks of website frontend development. Especially when the navigation needs to include multi-level sub-menus, AnQi CMS providesnavListTags can help us efficiently meet this need.

UnderstandingnavListThe core role of tags

navListThe tag is a tool in Anqi CMS template that is specifically used to retrieve website navigation data and display it on the page.It allows us to dynamically extract menu items from the pre-set navigation structure in the background, including top-level menus, second-level sub-menus, etc., greatly enhancing the flexibility and maintenance efficiency of the template.

The backend navigation settings of Anqi CMS are very flexible, you can create multiple navigation categories (such as "top navigationnavListThe tag's mission is to present these structured data on your website front-end template.

Its basic syntax structure is concise and clear:

{% navList 变量名称 %}
    {# 在这里通过循环处理导航数据 #}
{% endnavList %}

Among them,变量名称It is a variable you define yourself to storenavListData of all navigation tags obtained. Usually, we would name itnavsornavListso that it can be referenced in subsequent code.

Get to know in-depthnavListparameters

navListThe label supports several key parameters to help you accurately obtain the navigation data you need:

  • typeId: Navigation category IDThis is the most commonly used parameter. In the Anqi CMS backend navigation settings, you can create different categories for different navigation, each category has a unique ID. ThroughtypeIdParameter, you can specifynavListOnly get navigation data of a specific category. For example,typeId=1may indicate getting data for 'top navigation', whiletypeId=2Used to retrieve the data for the 'bottom navigation'. By default, if not specifiedtypeIdit will retrieve the navigation category with ID 1.

  • siteId: Site IDIf you are using the AnQi CMS multi-site management feature and want to call navigation data set by other sites in the current site template, you can usesiteIdThe parameter. However, for most single-site users, this parameter usually does not need to be manually set, as the system will automatically recognize the current site.

By combining these parameters, you can easily display different navigation menus in different areas of the website.

Navigation data structure analysis: Understanding how to build sub-menus

navListThe data obtained from the tag is an array containing multiple navigation items. In{% navList %}and{% endnavList %}you would usually usefora loop to iterate over these navigation items. Each item in the loopitem(Assuming you name the variablenavs, each navigation item isitem) has the following key properties, which are essential for building a submenu navigation bar:

  • Title:The display name of the navigation item.
  • SubTitle:Navigation item subtitle, if set in the background.
  • Description:Description information of the navigation item.
  • Link:URL link to jump to after clicking the navigation item.
  • PageId:If the navigation item links to a category or a single page, it will contain the corresponding ID. This is very useful when you need to retrieve content based on the navigation item ID.
  • IsCurrent:A boolean value indicating whether the current navigation item is the page the user is visiting. This is very important for implementing the highlight display of the navigation menu.
  • NavList: This is the key to implementing the submenu! NavListit is also an array that contains all the sub-navigation items of the current navigation item. This structure is recursive, meaning that sub-navigation items can also have their ownNavListThus, theoretically, it supports an infinite number of menu levels (although it is usually recommended not to exceed three levels in actual website design to ensure user experience).

Practice Exercise: Step by step to build a navigation bar with submenus

After understanding the data structure, we can start building a navigation bar with sub-menus in the template. The following are some common implementation methods.

1. Build the basic second-level navigation bar

This is the most common navigation structure, a first-level menu containing several second-level sub-menus.

{% navList navs with typeId=1 %} {# 假设1是您的顶部导航类别ID #}
<ul class="main-nav"> {# 主导航容器 #}
    {%- for item in navs %} {# 遍历一级导航项 #}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}" class="nav-link">{{ item.Title }}</a>
            {%- if item.NavList %} {# 判断当前一级导航项是否有子菜单 #}
            <ul class="sub-nav"> {# 子菜单容器 #}
                {%- for inner in item.NavList %} {# 遍历二级导航项 #}
                    <li class="sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}" class="sub-nav-link">{{ inner.Title }}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

Code explanation:

  • We first use{% navList navs with typeId=1 %}Get the navigation category data for ID 1.
  • The outermostforLoop throughnavsProcess each first-level navigation item.
  • item.IsCurrentTo determine if the current navigation item is active, if the user is visiting the page, then addactivethe class name to highlight the CSS style.
  • {%- if item.NavList %}It is a key judgment that checks whether the current level navigation item contains a submenu. Only whenNavListit is not empty, will the HTML structure of the submenu be rendered.
  • Inner layers.forLoop throughitem.NavListHandle each second-level navigation item, and also judgedinner.IsCurrent.

2. Display specific content in the submenu (such as product lists)

Sometimes, you may want to display a dropdown list containing the latest products or articles when hovering over a navigation item. This can be achieved by combiningnavListandarchiveListthe tag.

<ul class="main-nav">
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li class="nav-item">
        <a href="{{ item.Link }}" class="nav-link">{{item.Title}}</a>
        {%- if item.NavList %} {# 判断是否存在二级菜单 #}
        <ul class="sub-nav drop-menu">
            {%- for inner in item.NavList %} {# 遍历二级菜单项 #}
            <li class="sub-nav-item">
                <a href="{{ inner.Link }}" class="sub-nav-link">{{inner.Title}}</a>
                {% if inner.PageId > 0 %} {# 假设二级菜单链接的是某个分类（PageId即分类ID） #}
                    {# 在二级菜单下显示该分类的最新产品或文章，假设categoryId与inner.PageId对应 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                    {% if products %}
                    <ul class="sub-sub-nav-content"> {# 展示内容的容器 #}
                        {% 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>

Code explanation:

  • Here we assume that the secondary menu itemPageIdstores a category ID
  • {% if inner.PageId > 0 %}determines whether the secondary menu item is associated with an actual category.
  • {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}Tags are used to obtain the latest 8 product (or article) data under the category.
  • The product data is then traversed and displayed in a nested.ulin the list.

3. Display sub-categories in the submenu.

If your website has a deep category hierarchy and you want to directly display the second-level categories under the first-level categories, even the third-level categories, you can achieve this in the following way:

`twig

    {% navList navList with typeId=1 %}
{%- for item in navList %}
<li class="nav-item">
    <a href="{{ item.Link }}" class="nav-link">{{item.Title}}</a>
    {%- if item.NavList %} {# 判断是否存在二级菜单 #}
    <ul class="sub-nav drop-menu">
        {%- for inner in item.NavList %} {# 遍历二级菜单项 #}
        <li class="sub-nav-item">
            <a href="{{ inner.Link }}" class="sub-nav-link">{{inner.Title}}</a>
            {% if inner.PageId > 0 %} {# 假设二级菜单链接的是某个一级分类（PageId即分类ID） #}
                {# 获取该分类下的所有子分类 #}
                {% categoryList categories with parentId=inner.PageId %}
                {% if categories %}
                <ul class="sub-sub-categories"> {# 展示下级分类的容器 #}
                    {% for category in categories %}
                    <li>
                        <a href="{{ category.