How to set and display the navigation menu (top/bottom) of the AnQi CMS website?

The website navigation is the key path for users to explore the website content, and it is also an important reference for search engines to understand the website structure.In AnQiCMS (AnQiCMS), you can flexibly set up and manage the top and bottom navigation menus of the website to meet different design and functional needs.

This article will introduce in detail how to configure the navigation menu in the Anqi CMS backend, as well as how to display it in the website frontend template.

Part 1: Configure the navigation menu in the backend

In Anqi CMS, the navigation menu settings are concentrated in the "Background Settings" area of the backend, specifically the "Website Navigation Settings" feature.

1. Manage navigation categories

AnQi CMS allows you to create multiple independent navigation categories, which is very useful for managing menus at different locations (such as main navigation, footer navigation, sidebar navigation).

1. Access the navigation category:After logging into the backend, go to the "Backend Settings" menu under "Navigation Settings", and you will see an option for "Navigation Category Management".
2. Add a new category:Click to enter, the system will default to a 'Default Navigation' category.If you need an independent bottom navigation, you can click “Add Navigation Category”, enter a meaningful name, such as “Bottom Navigation” or “Footer Menu”, then save.
   • In this way, you can create exclusive navigation structures for different areas of the website, making it convenient for management and maintenance.

Section 2: Configure navigation links

After selecting or creating a navigation category, the next step is to add specific navigation links to the category. Each navigation link can be configured in detail:

1. Select a navigation category:On the "Website Navigation Settings" page, first select the navigation category you want to configure (such as "Default Navigation" or the "Bottom Navigation" you created).
2. Add/Edit navigation link:
   • Display name:This is the text that users see on the website front-end, it should be concise and clear, accurately reflecting the content of the link. For example, 'About Us', 'Product Center'.
   • Subtitle name:If your design requires, you can display a secondary title below the main title, such as 'Products' below 'Product'.
   • Navigation Description:Add a short description to the navigation item, which may be used to display hints in some template designs.
   • Link Type:Safe CMS provides three powerful link types to meet your needs for linking to different content:
     • Built-in links:A fixed page for the website, such as the homepage, article model homepage, product model homepage, or other custom model homepage. After selecting, the system will automatically generate the link.
     • Category page links:You can directly link to the article categories, product categories, or single pages on your website (such as the "Contact Us" page). Simply select the corresponding content.
     • External links:Provided the greatest flexibility, you can manually enter any internal or external URL address. This is very convenient for linking to third-party services or external cooperative websites.
   • Parent navigation:To create a dropdown menu or submenu, you simply need to set the 'parent navigation' to the corresponding parent menu item when adding the submenu item.The Anqi CMS supports two-level navigation (primary menu, secondary dropdown menu).
   • Display order:By adjusting the size of the number, you can control the arrangement order of navigation items at the same level. The smaller the number, the earlier it is displayed.

By following these steps, you can easily build a navigation menu that meets the website structure and user needs on the Anqi CMS backend.

Part two: Displaying the navigation menu in the front-end template.

After completing the navigation settings in the background, the next step is to display these navigation menus on the website front end using template tags. Anqi CMS is usednavListTo implement this feature, it has high flexibility and can adapt to various complex menu layouts.

1. UsenavListNavigation tag call

In your website template files (such as)header.htmlUsed for top navigation,footer.htmlUsed in the bottom navigation), you can usenavListtags to get the navigation data configured in the background.

A basic call method is as follows:

{% navList navs with typeId=1 %}
    <ul>
        {%- for item in navs %}
            <li><a href="{{ item.Link }}">{{item.Title}}</a></li>
        {% endfor %}
    </ul>
{% endnavList %}

here,navsis an array object that contains each navigation link you set up in the background.forThe loop will traverse these links,item.LinkGet the link address,item.TitleGet the display name.

• typeIdparameters: typeIdIs a key parameter to specify which navigation category you want to call. By default,typeId=1It usually corresponds to the "default navigation" on the backend. If you have created other navigation categories (such as "bottom navigation"), when calling it, you need to refer to its actual position in the backend.typeIdSpecify. Check the navigation category ID on the "Website Navigation Settings" page, or pay attention to the ID when creating a new category in the "Navigation Category Management".

Second, implement a dropdown menu navigation

Of Security CMSnavListTags support the easy creation of secondary dropdown menus. Each main navigation item (item) may contain aNavListProperty, this property itself is also a navigation list, representing the sub-menu of its lower level.

You can achieve this by nestingforLoop to display these sub-menus:

{% navList navs with typeId=1 %}
    <ul class="main-menu">
        {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %} {# 判断是否存在子菜单 #}
                    <dl class="sub-menu">
                        {%- for subItem in item.NavList %} {# 遍历子菜单 #}
                            <dd class="{% if subItem.IsCurrent %}active{% endif %}">
                                <a href="{{ subItem.Link }}">{{subItem.Title}}</a>
                            </dd>
                        {% endfor %}
                    </dl>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

The above code demonstrates how to judgeitem.NavListDoes it exist, if it exists then render a<dl>label as a submenu container and iterateitem.NavListthrough the submenu items.item.IsCurrentThe attribute can be used to determine whether the current navigation is active, which is convenient for adding styles.

3. Combined with content to dynamically display (advanced application)

For more advanced requirements, such as directly displaying a list of popular articles or product listings under a specific category in the navigation dropdown menu, you can combine other content tags likearchiveListorcategoryListTo implement this. It usually requires navigating to a specific category or page, and throughitem.PageIdto get the corresponding category or page ID.

For example, display the popular products under the category in a dropdown menu of a product category:

{% navList navList with typeId=1 %}
    <ul>
    {%- 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>
                    {# 如果该二级导航项关联了分类（PageId > 0），则加载该分类下的产品列表 #}
                    {% if inner.PageId > 0 %}
                        {% archiveList products with type="list" categoryId=inner.PageId limit="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 %}
    </ul>
{% endnavList %}

This example shows how to useinner.PageIdto callarchiveListLabels, thus dynamically displaying content in navigation, greatly enriching the functionality of the navigation menu.

Prompt with **practice

• Keep it concise:Avoid too many main menu items and too deeply nested submenus to prevent users from feeling confused.
• Semantic naming:The name of the navigation item should be clear and accurate, allowing users to understand the content it points to at a glance.
• Consistency:Maintain the unity of navigation style and structure within the website to enhance the user experience.
• Adapt for mobile:Ensure that the navigation menu displays and operates well on all devices, especially on mobile devices.
• Search Engine Optimization (SEO):A reasonable navigation structure helps search engines crawl and understand website content, improving website ranking.

Summary

AnQi CMS provides intuitive, flexible, and powerful functionality for website navigation settings and display. Whether it is a simple top/bottom menu,