How to create multi-level menus and custom navigation categories in website navigation settings?

As a senior website operator, I am well aware of the importance of a clear and efficient website navigation for user experience and search engine optimization (SEO).It is not only a map for users to explore the website content, but also a key for search engines to understand the website structure.AnQiCMS provides flexible and powerful navigation settings functionality, allowing us to easily create multi-level menus and customize navigation categories to meet the needs of different business scenarios.

Website navigation: the bridge connecting content and users

In a content management system, navigation is not just a simple combination of page links; it carries multiple tasks such as guiding users, highlighting core content, and enhancing the professionalism of the website.An elegantly designed navigation system can allow users to quickly find the information they need, reduce the bounce rate, and encourage them to delve deeper into more pages.For search engines, a clear navigation structure helps crawlers efficiently crawl and index website content, thereby improving the overall SEO performance of the website.AnQiCMS has fully considered these operation requirements, integrating the navigation settings into its core functions, thus providing us with a great degree of operational freedom.

EnglishQiCMS navigation setting core function overview

Create a dedicated navigation category: Define the website navigation area

AnQiCMS provides a "default navigation" category by default, but this is far from meeting all the needs of a modern website.We often need to display different navigation information at different locations on the website, such as the copyright links in the footer, the auxiliary function entries in the sidebar, or the unique menus for mobile devices.This is an important feature for "Navigation Category Management".

We can easily add custom navigation categories by accessing the 'Navigation Settings' and then 'Navigation Category Management'.Just click the "Add" button and name the new navigation category, such as "Footer Navigation", "Sidebar Navigation", or "Mobile Menu".After creation, this new category will appear in the navigation list, allowing us to add specific links to it.This modular design makes it clear and orderly to maintain and expand the website navigation, avoiding confusion in different navigation areas.

Build multi-level navigation menus: Flexible organization of content structure

Created after the navigation category is created, the next step is to add specific navigation links and build multi-level menus.“Navigation link settings” is the core area to achieve this goal.AnQiCMS supports up to two levels of navigation links to be configured directly in the background, that is, a main menu item can include a sub-menu item.

When adding or editing navigation links, we will see the following key settings:

• Parent Navigation:
• Display Name:This is the text displayed on the front page navigation. We can name it freely as needed, it does not necessarily have to be consistent with the actual content of the link, which is crucial for user-friendliness.
• Subheading Name:For scenes that require displaying double titles (such as Chinese main title and English subtitle), you can set the subtitle here to enrich the display effect of navigation.
• Navigation description:If the navigation item requires more detailed text description, it can be filled in here for the front-end template to display additional introduction information.
• Link type:AnQiCMS provides three flexible link types:
  • Built-in Links:Covered the general pages of the website, such as the homepage, article model homepage, product model homepage, and other custom model homepages. This facilitates our quick link to the core functional areas of the website.
  • Category page link:Allow us to directly select existing article categories, product categories, or standalone pages as navigation links, closely integrating the content categorization structure with the navigation system.
  • External links:Provided the greatest flexibility, any in-site or external URL can be added, meeting various jump requirements.
• Display Order:By setting the number to control the arrangement order of navigation links, the smaller the number, the earlier it is displayed. This allows us to easily adjust the visual priority of menu items and optimize the user's browsing path.

Through the reasonable use of the "Parent Navigation" option and various link types, we can build a logical and hierarchical two-level navigation menu in the AnQiCMS backend.

Navigation call in template and advanced application

The navigation menu configured on the back-end needs to be displayed on the front-end page through the template tags of AnQiCMS.navListThe label is the main tool to call the navigation list.

In the template, we can use{% navList navs with typeId=1 %}Such syntax is used to call the specified navigation category (such as 翻译结果).typeId=1Represents the default navigation) and assign all the navigation data tonavsto a variable. Then, throughforto iteratenavsVariables, which can output the first-level navigation items. For second-level navigation,navListEach label returneditemAll objects contain aNavListproperties, which store all the sub-navigation items under the first-level navigation. We can access them again by nesting theforin a loop to iterate overitem.NavListThus, it perfectly presents a two-level menu structure.

For example, a basic two-level navigation template code may look like this:

{% navList navs with typeId=1 %} {# 假设 typeId=1 是你的主导航类别 #}
<ul>
    {% for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {% if item.NavList %} {# 判断是否存在子导航 #}
            <ul class="sub-menu">
                {% for inner in item.NavList %}
                    <li class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

It is worth noting that although the backend directly supports the configuration of two-level menus, at the template level, we can combinecategoryListorarchiveListtag-/anqiapi-other/165.htmlThe document provides relevant examples, showing how to nest categories and document lists in navigation, which is a sophisticated and powerful application of AnQiCMS in the navigation display aspect.

Summary

The navigation setting feature of AnQiCMS is intuitive and easy to use, and also has high flexibility and scalability.Through clear navigation category management and support for two-level menu navigation link settings, operation personnel can easily build a navigation system that conforms to the website architecture and user habits.navListThe powerful tag calling ability, even able to dynamically generate more levels of content navigation, effectively enhancing the website's user experience and search engine friendliness.Master these settings tricks, and it will be the key to your efficient operation of the AnQiCMS platform.

---

Common Questions and Answers (FAQ)

1. How many levels can the navigation menu of AnQiCMS backend configuration support?AnQiCMS Backend directly configured navigation menu supports up to two levels (main menu and sub-menu). However, by usingnavListtags, and combinecategoryListorarchiveList等内容列表标签进行动态嵌套，您可以在前端实现更复杂的多级菜单效果，例如在子菜单下展示分类的文章列表。

2. How to adjust the display order of navigation menu items?In the "Navigation Settings" under "Navigation Link SettingsYou just need to enter the corresponding number for the menu item, the smaller the number, the closer the menu item will be displayed in the same-level menu.Adjust settings after completion and save to take effect.

3. I added a navigation category in the background, why is it not displayed on the website front end?Navigation category needs to be called on the front end through template tags after creation to display. Please check if your website template usesnavListlabels, andtypeIdThe parameter is correctly pointing to the ID of the new navigation category you created. For example, if you create a category named "Footer Navigation" with ID 2, then you should use it in the footer template.{% navList navs with typeId=2 %}to call it.