In the operation of a website, a clear and convenient navigation menu is the key to user experience and an important basis for search engines to understand the website structure. AnQiCMS (AnQi Content Management System) 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 tags.

navListThe primary responsibility of the label is to obtain the navigation link data you have pre-configured from the backend of AnQi CMS and display it on the website frontend.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 that list for you to organize and display on the page.

UsenavListThe basic structure of tags 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 preference.mainNav/footerLinksetc., as long as it remains consistent in the subsequent code.

navListThe label accepts two main parameters:

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

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

Parse the various fields of the navigation item.

InforIn the loop, each navigation item (usually named itemAll of them contain the various information required to build the menu:

  • Title: The display text of navigation links, such as “About Us”, “Product Center”.
  • SubTitleIf your navigation requires displaying a double title (such as a Chinese main title and an English subtitle), this field will come in handy.
  • DescriptionProvide a brief description of the navigation link, which can be used as a tooltip when the mouse hovers over it, or for some special layouts.
  • LinkThis is the target URL of the navigation link. Whether it is an internal link or an external link,navListit will provide you with the correct URL you configured in the background.
  • IsCurrent: This is a very practical boolean value (trueorfalse）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 navigation item corresponding to the current page, thereby enhancing the user experience.
  • NavListThis is the key field for constructing hierarchical navigation menus. If a navigation item contains sub-navigation,NavListIt is also an array object, storing data of the next level navigation items. This means you can use it again to handle the main navigation like you did beforeforin a loop to iterate overNavListThus, 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 to see.navListHow does it actually work. 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 top-level links of the main navigation.
  2. the outermostforloop through each top-level navigation item (item).
  3. item.IsCurrentis used to add the corresponding navigation item for the current pageactiveClass, to implement highlighting effect.
  4. {% if item.NavList %}Determine if the current navigation item has a submenu.
  5. If there is a submenu, the inner layer of theforThe loop will iterate over theitem.NavListeach sub-navigation item in theinner) And similarly, build links and determine whether the sub-navigation items are active.

With this nested structure, you can easily build a beautiful and functional hierarchical navigation menu.

Deepening Application: More complex navigation scenarios

navListIts strengths go beyond this, as it can deeply integrate with other functions and tags of the Anqi CMS, meeting more complex navigation needs.

Navigation at different locationsAs mentioned earlier, you cantypeIdParameters are used to distinguish navigation menus at different positions.For example, you may need to have a main navigation in the header, copyright information and quick link navigation in the footer, and a category navigation in the sidebar.typeIdto call:

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

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

Thus, your template design can display different navigation content in different regions based on actual needs, without the need to rewrite navigation data.

Dynamic Content Integration navListCan be combined with other content tags to create dynamic dropdown menus.For example, a 'Product' menu item may need to display a list of popular products or directly list all product categories.archiveList(Document List Tag) orcategoryList(Category list label) to implement.

For example, assume you have a navigation item "Products

<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 website content, 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 label itself only provides data, you need to wrap it with appropriate HTML tags to ensure navigation is friendly to both users and search engines.A well-structured HTML helps search engines crawl and understand the hierarchical relationship of a website, thereby improving the website's SEO performance.

Summary

Anqi CMS'snavListTags are a comprehensive and easy-to-use tool that makes building and managing hierarchical navigation menus for websites simple and efficient.By flexibly using its parameters and the returned data fields, and combining with other content tags provided by Anqi CMS, you can create various navigation structures from simple to complex, effectively enhancing user experience and website accessibility.

Common Questions (FAQ)

  1. Q: How to implement a dropdown menu with three or more levels in the navigation menu?navListDo you support it? Answer: navListWhat the tag itself returnsitemContains an object that includes aNavListfield, which is used to store the sub-level navigation. Theoretically,NavListCan be nested infinitely, as long as your website navigation structure has so many levels,navListyou can extract all of them. You just need toitem.NavListdo it againforand check within the loop.inner.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. Question: How can I display a completely different set of links in the footer of my website instead of the main navigation subset? Answer:The "Website Navigation Settings" feature of the 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 exclusive links for it.navListTagstypeIdParameters can be used to call this specific navigation category. For example, if your "footer navigation" corresponds totypeIdis 2, then you can use{% navList footerNavs with typeId=2 %}...{% endnavList %}to render the footer navigation individually.

  3. Question: There is a link in my navigation that needs to point to an external website, such as my company's blog which is on a different domain,navListCan it handle this kind of external link? Answer:Yes,navListFully supports external links.In the AnQi CMS backend's 'Website Navigation Settings', when you add or edit navigation links, the link type options usually include 'Internal Links', 'Category Page Links', and 'External Links'.Select the "External Link" type, then enter the complete external URL.navListWhen the label is called on the front end, it will directly provide the value you configured on the back end.LinkThe field value will be output correctly, whether it is an internal link or an external link.