In website operation, a clear and efficient navigation system is undoubtedly the cornerstone of user experience and search engine optimization.An elegantly designed navigation can not only guide users to find the required information quickly, but also help search engines better understand the structure of the website.In AnQiCMS, we have powerful tools to flexibly configure and display multi-level navigation lists, thus meeting diverse website needs.

Step 1: Flexibly configure the navigation menu in the background

The navigation management function of AnQiCMS is very intuitive. First, we will build the core menu structure in the "Navigation Settings" on the backend.

Navigation Category ManagementIt is the key to implementing multiple navigation menus.The system provides a default navigation set, but if our website needs top main navigation, bottom links, sidebar menus, and other navigation in different positions, we can manage them separately by adding new navigation categories.For example, we can create a new category named “Footer Navigation” and configure its independent menu items.Thus, navigation at different positions can perform their respective duties without interfering with each other.

InNavigation Link SettingsIn English, we can specify detailed information for each menu item. This includes:

  • Display Name: The menu text that users see on the frontend.
  • Subtitle name: If you need bilingual titles or additional tips, you can fill them in here.
  • Navigation description：To provide a brief description for the menu item, which can be called in the template.
  • Link Type：AnQiCMS provides various flexible link methods. We can chooseBuilt-in link（such as the home page, the home page of a specific model），Category page link(Associated with existing article categories or single pages), orExternal Link(Pointing to any URL within or outside the site).
  • Display Order：By adjusting the size of the number, you can control the order of the menu items. The smaller the number, the closer it is to the front.

ImplementationMulti-level navigationThe core lies in the "上级导航" field.When creating menu items, you can choose if it belongs to 'Top Navigation' as a main menu item; or choose if it is subordinate to some existing menu item, thus forming a secondary or even multi-level dropdown menu.AnQiCMS supports up to two levels of dropdown navigation links, which is enough to meet the navigation needs of the vast majority of websites, while avoiding the user confusion that may be caused by too complex a hierarchy.

Step two: Call the navigation list cleverly in the template

When the background configuration is completed, the next step is to display these navigation lists in the website template.AnQiCMS's template engine uses a tag syntax similar to Django, making it very convenient to call data.

To display the navigation list, we mainly usenavListtags. For example, we can call the main navigation like this:

{% navList navs %}
    <ul>
        {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {%- if item.NavList %} {# 判断是否存在子导航 #}
                <dl>
                    {%- 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 snippet,navList navsAssign the navigation data configured in thenavsbackground to the variable. Then, we go through the firstforLoop through the main menu items.item).item.Linkanditem.TitleOutput the link address and display name separately.

The key to implementing multi-level navigation is.{%- if item.NavList %}this judgment. If the current main menu item has child navigation (i.e.item.NavListNot empty), we will nest anotherforLoop to traverse these sub-navigations(inner). This way, it is easy to build a two-level navigation structure or even more (depending on the backend configuration).

It is worth mentioning that,{% if item.IsCurrent %}active{% endif %}This code is very practical, it will determine whether the current menu item matches the page the user is visiting. If it matches, it will addactiveWe can use CSS to highlight the current navigation item on the page, greatly enhancing the user experience.

Step 3: Dynamically enrich the navigation content

The strength of AnQiCMS not only lies in displaying static navigation links, but it also dynamically loads articles, products, or subcategory lists in the dropdown menu of navigation, greatly enriching the practicality of navigation.

Example one: Display the latest articles or product lists under the category in the navigation dropdown

The translation of 'auto' to 'English' is 'English'. However, the provided value does not contain the word 'auto', so the original value is kept.

<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 %} {# 如果二级导航关联了分类/页面 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的最新8篇产品 #}
                    {% if products %}
                    <ul class="nav-menu-child-child">
                        {% 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>

In this example, when the loop reaches the second-level navigationinnerwe go throughinner.PageIdThen get the category ID associated with it and usearchiveListThe label, which dynamically calls the titles and links of up to 8 relevant product articles based on the category ID, is displayed in the dropdown menu.

Example two: Show subcategories of categories in the navigation dropdown

Another common requirement is to display the first-level categories under the main navigation, and after clicking or hovering, the dropdown menu displays all the second-level categories under the first-level category.

<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>
                        {% for category in categories %}
                        <li>
                            <a href="{{ category.Link }}">{{category.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

Here, we also take advantage ofinner.PageIdasparentIdParameter, throughcategoryListTag retrieves and displays all subcategories under the specified category and constructs a deeper hierarchical classification navigation structure.

Useful Tips and Considerations

  • English: Keep it concise.Although it is possible to build multi-level navigation, it is usually recommended that the navigation levels not exceed three for the sake of user experience. Too much nesting can easily confuse users.
  • UtilizeIsCurrentMake sure to useitem.IsCurrentAdd special styles to the currently active navigation item, so that users are always clear about their position within the website.
  • Separate backend management from templates：AnQiCMS separates the configuration of navigation from the front-end display logic, which means we can adjust the navigation content and structure at any time in the background without modifying the template code, greatly improving operational efficiency.
  • Performance considerationsIf the dynamically loaded navigation content is too much, it may have a slight impact on the page loading speed. In design, consider caching popular content or limiting the number of loaded items.

With these flexible navigation configurations and template tags provided by AnQiCMS, we can easily build a website navigation system that meets a variety of complex needs, providing users with a smooth browsing experience and laying a solid foundation for the website's SEO performance.

Frequently Asked Questions (FAQ)

Q1：How to create multiple navigation menus (such as top main navigation and bottom footer navigation)? A1:In AnQiCMS backend, go to the 'Navigation Settings' page, you will see the 'Navigation Category Management' area.Click "Add New Navigation Category", enter a new category name (for example, "Footer Navigation"), and save to add an independent menu item for this new category.