The navigation system of the website is like the skeleton of a building, it not only guides users to browse but also directly affects the exposure of the content and the search engine optimization.AnQiCMS provides flexible and powerful navigation management functions, allowing you to easily build multi-level menus and achieve deep integration with website content, thereby enhancing user experience and content distribution efficiency.

Flexible configuration, build multi-level navigation skeleton

In AnQiCMS, the starting point of implementing multi-level menus is the background navigation settings.You can find all configuration items related to website navigation under 'Background Settings' and 'Navigation Settings'.

Firstly, the system provides a default navigation category by default, but if you have more diverse needs, such as top navigation, footer navigation, sidebar navigation, etc., AnQiCMS allows you to add multiple custom categories through 'Navigation Category Management'.This provides great flexibility for your website, allowing you to set independent navigation structures for different locations.

When adding or editing specific navigation links, several key settings determine the implementation of multi-level menus.Every navigation link can be specified with a "parent navigation", which is the core of building a multi-level menu.If you set the "Parent Navigation" to "Top Navigation", it will be displayed as a top-level menu; if you choose an existing top-level menu as its parent, it will naturally become a second-level menu.Currently, AnQiCMS supports up to two levels of navigation links, which is sufficient to meet the needs of most websites.

The setting of the 'Link Type' ensures the联动 of navigation and content.You can choose 'built-in link' to point to the home page or the home page of a specific model (such as articles, products); select 'category page link' to directly associate with created article categories, product categories, or single pages; and 'external link' provides the greatest degree of freedom, allowing you to point to any URL within or outside the site.These options make your navigation not just simple text links, but a direct manifestation of the website's content structure.

Template implementation:navList标签的强大力量

After the background configuration of the navigation structure is completed, the next step is to present it in the front-end template.AnQiCMS uses syntax similar to Django template engine, making template creation intuitive and efficient.navList.

Pass{% navList navs %}标签，您可以获取到后台配置的所有导航数据。navs变量是一个包含导航条目（item）的数组，您可以遍历它来生成菜单。

An example of a typical multi-level menu structure, which can be implemented throughnavListlabel combined withforlooping and conditional judgments. Eachitemmay contain aNavListProperties, this property is also an array, storing the data of the sub-menu items of the current navigation item. Through nested.forLoop, you can perfectly build a second-level menu:

{% navList navs %}
<ul class="main-nav">
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断是否有下级导航 #}
            <dl class="sub-nav">
                {%- 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 %}
</ul>
{% endnavList %}

In the above code,item.IsCurrentThe property helps you determine whether the current navigation item is the current page, and then addactiveClass name, enhancing user experience.

Content联动: Make the menu 'alive'

仅仅显示链接文字可能还不够，有时您希望在鼠标悬停或点击二级菜单时，能够直接展示与该菜单项关联的动态内容，比如某个分类下的最新文章或热门产品。AnQiCMS 的navListTag combinationarchiveListandcategoryListTags for content, which can easily realize this content linkage.

Each navigation itemitemmay contain aPageIdattribute, which is associated with the category or single page ID set in the background. Using thisPageIdEnglish, you can dynamically call related content in the secondary menu and even deeper levels.

For example, if you want to directly display the latest product list under the second-level product category menu, you can do it like this:

<ul>
    {% navList navList with typeId=1 %} {# 假设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 %} {# 确保该导航项关联了内容ID #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 联动显示该分类下最新的8个产品 #}
                    {% if products %}
                    <ul class="nav-menu-child-products">
                        {% 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>

This code first traverses the main navigation. If there is a sub-navigation (second-level navigation) under the first-level navigation, it will continue to traverse the second-level navigation. For each second-level navigation item, if it is associated with aPageId（通常是某个分类的ID），就会使用 EnglisharchiveList标签来获取该分类下的最新产品（ EnglishmoduleId需根据实际产品模型ID调整，这里未显式给出，假设 Englishinner.PageIdCorresponding product category). In this way, users can directly preview the associated content in the navigation menu, greatly improving the browsing efficiency.

Another common scenario is to display the subcategories of a category in navigation. This can also be done bycategoryListTags:

<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 class="nav-menu-child-subcategories">
                        {% 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>

Here, if a secondary navigation item is associated with a category ID,categoryListLabel will fetch and display all subcategories under this category.

Useful Tips and Considerations

  • Modular template:To maintain code neatness and maintainability, it is recommended to store the navigation code snippet separately inpartial/directory (for examplepartial/header_nav.html), then through{% include "partial/header_nav.html" %}The label is referenced in the main template, which conforms to the template conventions of AnQiCMS.
  • CSS and JavaScript：Navigation menu final display effect, including dropdown animation, responsive layout, etc., all depend on the CSS styles and JavaScript interaction logic you carefully write.AnQiCMS provides a flexible template structure, but the specific style and behavior need to be completed by front-end code.
  • Static rules:Ensure your website uses pseudo-static URLs