In website operation, a clear and convenient navigation menu is the key to user experience, as well as an important basis for search engines to understand the structure of the website. AnQiCMS (AnQiCMS) provides powerful navigation management functions, as well as template tagsnavListIt is the core tool for building these hierarchical navigation menus on the front-end.

navListThe core function and working principle of the tag.

navListThe tag's main responsibility is to retrieve the navigation link data you have pre-configured from the AnQi CMS backend and display it on the website front end.You can imagine it as an intelligent assistant, you tell it which navigation list you need (such as "main navigation" or "footer navigation"), and it will package all the links and related information on the list for you to organize and display on the page.

UsenavListThe basic structure of the tag is as follows:{% navList navs %}...{% endnavList %}. Here,navsis the variable name you specify for this set of navigation data, you can name it according to your own preferencemainNav/footerLinksetc., as long as it is consistent in the subsequent code.

navListThe tag accepts two main parameters:

  • typeIdThis parameter is used to specify the navigation category ID you want to retrieve.In the AnQi CMS backend "Website Navigation Settings", you can create multiple navigation categories (such as "Main Navigation", "Footer Navigation", "Sidebar Navigation").Each category has a unique ID. By settingtypeIdYou can accurately call navigation data for a specific category. If your website has only one navigation or uses the default navigation, this parameter is usually omitted.
  • siteIdIf you are using the AnQi CMS multi-site management feature and want to call data from other sites, you can do so bysiteIdSpecify. For most single-site users, this parameter is usually not required.

WhennavListAfter the label is executed, it will return an array object containing all the navigation items (that is, the one you specified)navsvariable). You need to useforLoop through this array to access the details of each navigation item one by one.

Parse the various fields of the navigation items.

InforIn the loop, each navigation item (usually nameditem)They contain all the information needed to build the menu:

  • Title: Navigation link display text, such as "About Us", "Product Center".
  • SubTitleIf your navigation needs to display dual titles (such as Chinese main title, English subtitle), this field will come in handy.
  • DescriptionProvide a brief description of the navigation link that can be used as a tooltip on hover, or for special layouts.
  • LinkThe target URL of the navigation link. Whether it is an internal link or an external link,navListit will provide you with the correct URL configured in the background.
  • IsCurrentIt is a very practical boolean value (trueorfalseIt is used to determine whether the current navigation item is the page the user is visiting.You can use this field to add special styles (such as highlighting) to the corresponding navigation item on the current page, thereby enhancing the user experience.
  • NavListThis is the key field for building a hierarchical navigation menu. If a navigation item contains a sub-navigation,NavListIt is also an array object, containing the data of the next level navigation items. This means you can use it in the same way as the main navigation.forto loop throughNavListThus, create a multi-level nested dropdown menu.

Build the basic level navigation menu

Let's take a look at an example of a simple two-level navigation menu.navListHow it actually works. Suppose you have configured a category named 'Main Navigation' in the background, which includes some top-level menus and some top-level menus with sub-menus.

{% navList navs %}
<ul class="main-nav">
    {%- for item in navs %}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.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 }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In this code block:

  1. We first use{% navList navs %}To get all the top-level links of the main navigation.
  2. The outermostforLoop through each top-level navigation item (item)
  3. item.IsCurrentUsed to add the corresponding navigation item for the current pageactiveclass to achieve highlighting effect.
  4. {% if item.NavList %}To determine if the current navigation item has a submenu.
  5. If there is a submenu, the innermostforThe loop will iterate overitem.NavListeach sub-navigation item ininner), and the same links and active judgment are built for the sub-navigation items.

Build a beautifully functional hierarchical navigation menu easily through this nested structure.

Deepen the application: more complex navigation scenarios.

navListThe power of this is far from over, it can deeply integrate with the other functions and tags of AnQi CMS, meeting more complex navigation needs.

Navigation at different locationsAs mentioned earlier, you can go throughtypeIdParameters to distinguish different navigation menus. For example, you may need a main navigation in the header, a copyright information and quick link navigation in the footer, and a category navigation in the sidebar.In the background "Website Navigation Settings" create different navigation categories, and then use them separatelytypeIdto call:

{# 页面头部的主导航 #}
{% navList headerNavs with typeId=1 %} ... {% endnavList %}

{# 页面底部的页脚导航 #}
{% navList footerNavs with typeId=2 %} ... {% endnavList %}

In this way, your template design can display different navigation content according to actual needs, in different areas, without the need to rewrite navigation data.

Integrate dynamic content navListCan be combined with other content tags to create a dynamic dropdown menu.For example, a "Product" menu item may need to display a list of popular products or directly list all product categories.This requires you to configure the navigation items to point to specific categories or pages in the backend, and then combine them on the frontendarchiveList(Document list tag) orcategoryListTo implement (category list tag)

For example, suppose you have a navigation item "Product", set its link type to "Category Page Link" in the backend, and select a top-level product category. Then on the frontend, you can extend your navigation code like this:

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {# 假设这个导航项的PageId指向一个产品分类，我们希望显示该分类下的子分类 #}
        {% if item.PageId > 0 %}
            {% categoryList categories with parentId=item.PageId %}
            {% if categories %}
            <ul class="mega-menu"> {# 示例：一个更复杂的下拉菜单，可能包含多列 #}
                {% for category in categories %}
                <li>
                    <a href="{{ category.Link }}">{{category.Title}}</a>
                    {# 可以在此基础上再显示每个子分类下的文档 #}
                    {% archiveList products with type="list" categoryId=category.Id limit="5" %}
                    {% if products %}
                    <ul class="nested-sub-menu">
                        {% for product in products %}
                        <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
            {% endcategoryList %}
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

In this way, your navigation menu is not just a collection of static links, but a portal that can dynamically update based on the content of the website, greatly enhancing the flexibility and richness of the website.

Front-end Structure and SEOWhen building navigation, it is crucial to use semantically meaningful HTML structures (such as<ul>/<li>/<a>).navListThe tag itself only provides data, you need to wrap it with appropriate HTML tags to ensure navigation is user-friendly and also friendly to search engines.A good HTML structure helps search engines crawl and understand the hierarchy of a website, thereby improving the website's SEO performance.

Summary

Of Security CMSnavListThe tag is a comprehensive and easy-to-use tool that makes building and managing the hierarchical navigation menus of a website simple and efficient.By flexibly using its parameters and returned data fields, and combining with other content tags provided by Anqicms, you can create various navigation structures from simple to complex, effectively enhancing user experience and website accessibility.

Frequently Asked Questions (FAQ)

  1. Question: How can a three-level or more nested dropdown menu be implemented in the navigation menu?navListDo you support? Answer: navListThe tag itself returns.itemThe object contains one.NavListField, this field is used to store sub-level navigation. Theoretically,NavListIt can be nested infinitely, as long as your website navigation structure has this many levels,navListyou can extract all of it. Just loop through the template code again,item.NavListand check inside the loopforwhile checking internallyinner.NavListWhether it exists, it can be infinitely constructed into multi-level dropdown menus. However, in actual design, for the sake of user experience, it is usually recommended that the navigation level not exceed three levels.

  2. Ask: How can I display a completely different set of links in the footer of my website instead of the main navigation subset? How can I achieve this? Answer:The 'Website Navigation Settings' feature of AnQi CMS backend supports creating multiple independent navigation categories.You can create a new navigation category in the background, for example, named "Footer Navigation", and configure a dedicated link for it.Then, use in the template, withnavListlabel'stypeIdParameters to call this specific navigation category. For example, if your "footer navigation" corresponds totypeId2, then you can use{% navList footerNavs with typeId=2 %}...{% endnavList %}to render the footer navigation separately.

  3. Ask: There is a link in my navigation that needs to point to an external website, for example, my company's blog is on another domain,navListCan it handle this kind of external link? Answer:Yes,navListFully supports external links. In the Anqi CMS backend, when adding or editing navigation links, the link type options usually include 'Internal Link', 'Category Page Link', and 'External Link'.Select the 'External Link' type and enter the complete external URL.navListThe label, when called on the front end, will directly provide the one you configured on the back endLinkThe field value will be output correctly, whether it is an internal link or an external link.