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

As an experienced 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 content of the website, but also a key for search engines to understand the structure of the website.AnQiCMS provides flexible and powerful navigation settings on the website, allowing us to easily create multi-level menus and customize navigation categories to meet the needs of different business scenarios.

Website navigation: The bridge between 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.A well-designed navigation system can allow users to quickly find the information they need, reduce the bounce rate, and encourage them to browse 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 fully considered these operational needs, integrating navigation settings into its core functions, providing us with great operational freedom.

AnQiCMS navigation settings core feature overview

In the AnQiCMS backend management interface, the website navigation settings are located under the "Navigation Settings" section in the "Backend Settings".Here are integrated the navigation category management and navigation link setting of the two major functions, allowing operators to fine-tune the navigation areas of the website.With these features, we can create independent navigation systems for different locations on the website (such as the top, bottom, sidebar, etc.) and configure menu items with multi-level structures for each navigation system.

Create a dedicated navigation category: define the website navigation area

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

By accessing 'Navigation Settings' and 'Navigation Category Management', we can easily add custom navigation categories.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, for us to add specific links to it.This modular design makes the maintenance and expansion of website navigation clear and orderly, avoiding confusion in different navigation areas.

Build multi-level navigation menus: flexibly organize content structure

After creating the navigation category, 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 navigation links up to two levels directly in the backend, that is, a main menu item can contain a sub-menu item.

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

• Parent navigation:This is the key to implementing multi-level menus. If you choose 'Top-level navigation', the current link will be displayed as a first-level main menu.If you select an existing top-level navigation, the current link will be displayed as a submenu.
• Display name:This is the text displayed on the front-end navigation page. We can name it freely as needed, and it may not be exactly consistent with the actual content of the link, which is crucial for user-friendliness.
• Subtitle name:For scenes that require 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, you can fill it here, which is provided for the front-end template to display additional introduction information.
• Link Type:AnQiCMS provides three flexible link types:
  • Built-in links:Covered the common pages of the website, such as the homepage, article model homepage, product model homepage, and other custom model homepages. This facilitates quick access to the core functional areas of the website.
  • Category page links:We can directly select existing article categories, product categories, or standalone pages as navigation links, closely integrating the content classification structure with the navigation system.
  • External links:Provided the greatest flexibility, can add any in-site or off-site URL to meet various jump requirements.
• Display order:By setting the number to control the order of navigation links, the smaller the number, the earlier it is displayed. This makes it easy to adjust the visual priority of menu items and optimize the user's browsing path.

By reasonably utilizing 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 the template and advanced application

The navigation menu configured in the background needs to be displayed on the front page through the AnQiCMS template tags.navListLabels are the main tools to call the navigation list.

In the template, we can use{% navList navs with typeId=1 %}This syntax is used to call the specified navigation category (such astypeId=1representing the default navigation) all the navigation data, and assign it tonavsvariable. Then, byforLoop throughnavsVariable, it can output a first-level navigation item. For second-level navigation,navListEach tag returnsitemAn object contains aNavListattribute, which stores all the sub-navigation items under the first-level navigation. We can use nestedforto loop throughitem.NavListThus, it perfectly presents the two-level menu structure.

For example, the code for a basic two-level navigation template might 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 background directly supports the configuration of two-level menus, at the template level, we can combinecategoryListorarchiveListOther tags to implement a more complex multi-level menu dynamic display.For example, we can dynamically pull the subcategory list under a second-level menu, or directly display the article list under a certain category, thus achieving a theoretically 'infinite-level' menu effect, greatly enriching the discoverability of the website content.tag-/anqiapi-other/165.htmlThe document provides relevant examples showing how to nest categories and document lists in navigation, which is an advanced and powerful application of AnQiCMS in terms of navigation display.

Summary

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

Frequently Asked Questions (FAQ)

1. How many levels can the navigation menu of AnQiCMS backend configuration support?AnQiCMS's backend navigation menu supports up to two levels (one main menu and one submenu). However, by using the template innavListtags, and combinecategoryListorarchiveListTo dynamically nest content list tags, you can implement a more complex multi-level menu effect on the front end, such as displaying a list of categorized articles under the submenu.

How to adjust the display order of navigation menu items?In the "Navigation Settings" under "Navigation Link Settings", when editing each navigation link, there will be an option for "Display Order".You only 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.After adjusting, save the settings to take effect.

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