AutoCMS provides a straightforward and powerful navigation menu management system, allowing you to easily build a clear, user-friendly navigation structure for your website, including multi-level dropdown menus.This not only enhances the user experience of the website, but also helps search engines better understand the content hierarchy of your website, thereby optimizing SEO performance.

Understanding the navigation system of Anqi CMS

In the AnQi CMS, the settings and management of the navigation menu are all concentrated in the "Website Navigation Settings" function on the backend.This is the core area where you build your website menu.The navigation system of Anqi CMS allows you to create different types of navigation categories, such as main navigation, footer navigation, or sidebar navigation. Each navigation category supports up to two levels of menu structure, that is, a primary menu and its corresponding sub-menu.

This design makes content organization more flexible, allowing you to aggregate related content under the same parent menu and present it to visitors in the form of a dropdown menu. This not only maintains the interface's cleanliness but also facilitates users in quickly finding the information they need.

English backend settings: the foundation of building second-level menus

To start setting the secondary dropdown menu, you first need to enter the "Background Settings

  1. Manage navigation category:By default, the system will have a "default navigation" category.If you need to set up independent menus for different areas of the website (such as the main navigation, footer, etc.), you can add new categories through the 'Navigation Category Management' feature.For example, you can add a new category named "Footer Navigation".Each category will have its own set of navigation links.

  2. Configure navigation links:Under the selected navigation category, you can start adding and organizing navigation links.

    • Create a primary navigation:First, add the main menu item of your website.When adding a new link, set the "Parent Navigation" option to "Top Navigation".These will be the main entries displayed on the navigation bar of your website.
    • Create a secondary dropdown menu:Then, add a submenu for each first-level navigation item that requires a dropdown function.When adding these submenu items, the key is to set the 'Parent Navigation' option to the corresponding top-level navigation item.These links will automatically be assigned to their parent menu, forming a dropdown effect.
      • Built-in Links:Applicable to the homepage linked to the website or specific content models (such as articles, products).
      • Category page link:This is the most commonly used way to associate content.You can directly select the created "document category" or "single page" as the navigation target.When you select a category, the navigation link will automatically direct to the page of that category; select a single page and it will direct to that single page.This way, your dropdown menu can directly guide users to access specific content lists or information pages.
      • External links:Allow you to link to any custom URL within the site or external websites, providing great flexibility.
    • Adjust the display order:You can use the "Display Order" field to control the arrangement position of navigation items in the menu. The smaller the number, the earlier it is displayed, which helps you finely adjust the menu layout.

Through the above background configuration, you have already defined a clear hierarchy and content direction for the website's navigation menu.

Template Implementation: Make the navigation 'move' on the front end.

After setting up the navigation links in the background, you also need to call these data in the front-end template files so that they can actually display on the website.The CMS uses a template engine syntax similar to Django, making template development simple.

  1. 定位template file:usually, the header navigation menu of a website is defined in the public template file, for example/template/您的模板名称/partial/header.htmlor/template/您的模板名称/bash.htmlIn such files.

  2. UsenavListTags:AnQi CMS providesnavListTemplate tag used to retrieve the navigation list data configured in the background. This tag will return a structured data containing navigation items and their sub-items.

    Below is a general example code snippet that demonstrates how to usenavListtags to render a menu structure that supports two-level dropdowns:

    <nav class="main-navigation">
    {% 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 subItem in item.NavList %} {# 遍历二级导航项 #}
                            <li class="{% if subItem.IsCurrent %}active{% endif %}">
                                <a href="{{ subItem.Link }}">{{subItem.Title}}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
    {% endnavList %}
</nav>

    In this code,{% navList navs with typeId=1 %}It will obtain all navigation data under the navigation category with backend ID 1. Outer layerforLoop through the first-level navigation items, the inner layer.{%- if item.NavList %}Is the key to determine whether there is a submenu under the current main menu item. If there is, it will render asub-menulist, and then iterate through theforto display all secondary submenu items.

    Further expansion:In addition to simple sub-menus, you can also display more rich content in the dropdown menu according to your needs. For example, under the second-level menu items,categoryId=subItem.PageIdCombinearchiveListTags, directly display the hot articles or product lists under the category, greatly enhancing the practicality of navigation. When setting the navigation link in the background, if you select "Category Page Link",subItem.PageIdIt will automatically have the corresponding category ID, convenient for you to call in the template.

Associate with different types of content: the flexibility of navigation

The navigation system of Anqi CMS shows extremely high flexibility in content association. When configuring navigation links in the background, you can freely choose to associate navigation items with:

  • Built-in pages:Like the home page or the list page of a specific content model.
  • Specific categories or single pages:When you associate a dropdown menu item with a category of articles, products, or specific pages like "About Us", "Contact Us", and so on, the system will automatically handle its URL. In the template, you only need to{{item.Link}}or{{subItem.Link}}Can correctly refer to the addresses of these pages. If necessary,item.PageIdorsubItem.PageIdCan also further help you obtain the detailed information of the category or single page in the template, such as displaying the list of articles under the category.
  • External website or custom URL:Also, you can directly enter for situations that require linking to external resources or specific custom URLs inside the site.

This flexible content association mechanism allows you to create a clear and informative navigation menu based on the overall content structure of the website and the browsing habits of users.

Summary

Through the navigation management feature of the AnQi CMS, you can conveniently and quickly create and maintain multi-level dropdown menus, effectively organizing the website content. From the navigation category management and link configuration on the backend, to the front-end templates,navListLabel application, every step aims to provide an efficient and flexible solution to help your website better serve users and achieve better online performance.

Common Questions (FAQ)

  1. Can the navigation menu only have two levels?Yes, the navigation management function built into Anqi CMS currently supports the original two-level menu structure, that is, one main menu item and its one-level dropdown submenu.This design is intended to balance the needs of most websites and the simplicity of user experience.If you need a deeper level of navigation structure, you may need to implement it through custom templates or by combining frontend JS/CSS, but this goes beyond the scope of the system's native support.

  2. Why did I set up a secondary menu, but the front-end website did not display it?This is usually because the front-end template file has not properly called or rendered the data of the second-level menu. Please check the following points:

    • Are template tags used correctly:Confirm that your template file uses{% navList ... %}tags, and correctly traversed within themitem.NavListto display sub-menu items.
    • CSS style issues:Even if the data is rendered correctly, without the corresponding CSS styles to control the display of the dropdown menu (such as default hidden, displayed when the mouse hovers over), users may still not be able to see it.Make sure your CSS file includes styles for displaying/hiding, layout, and other dropdown menu rules.
    • Cache issue:Sometimes system cache or browser cache may cause changes not to be displayed in time, try to clear the Anqi CMS backend cache and browser cache.

  3. Can I directly display the article list or product list under a certain category in the secondary menu?Of course you can. When you iterate through the secondary menu items in the templatesubItemwhen