How to customize the website navigation menu (multi-level navigation) in AnQiCMS?

As an experienced AnQiCMS website operator, I know that a clear and efficient navigation menu is crucial for the website's user experience and search engine optimization (SEO).AnQiCMS with its exceptional flexibility and customizability, provides us with powerful tools for building and managing multi-level navigation.This article will elaborate on how to customize and implement a multi-level navigation menu in AnQiCMS.

Understand the navigation system architecture of AnQiCMS

The navigation system design of AnQiCMS adheres to its core concepts of efficiency and ease of use.It clearly separates the configuration of the navigation menu from the rendering logic of the front-end template, giving website operators great control.In AnQiCMS, you can easily define the navigation structure through the backend interface, including up to two levels of menu hierarchy, and front-end developers can use intuitive template tags to render the content configured in the backend to any location on the website.This separation design not only simplifies the management process, but also ensures that the website can maintain excellent performance when facing high concurrency access.

Configure multi-level navigation menu in the background

In the AnQiCMS backend management system, the configuration of the navigation menu is concentrated in the "Navigation Settings" module under "Backend Settings". This is the core area for implementing multi-level navigation.

First, you need to access the AnQiCMS backend management interface, then navigate to the "Backend Settings" tab, click on "Navigation Settings" to enter the navigation management page.

Navigation Category Management

AnQiCMS allows you to create multiple independent navigation categories, such as "main navigation", "footer navigation", or "sidebar navigation".By default, the system will provide a "default navigation" category.If your website needs to display different menu structures in different regions, you can create new navigation groups by clicking on 'Navigation Category Management' and then 'Add New Navigation Category'.For example, you can create a category named "Footer Navigation" to manage links at the bottom of the website.This classification management mechanism makes the website's navigation structure clearer and easier to maintain.

Navigation link settings

Configure specific navigation links is the key step to build multi-level navigation. After clicking on any navigation category (such as "default navigation"), you can start adding or editing navigation links.

1. Add a top-level navigation:When you need to create a top-level menu item, select 'Top-level navigation' in the 'Parent navigation' dropdown. Next, you need to fill in the following information:

   • Display name:This is the text displayed on the front page navigation link, for example 'Products & Services'.
   • Subtitle name (optional):If you wish to display the subtitle or English title of navigation at the same time, you can fill it here.
   • Navigation description (optional):Used to add additional description text to navigation links, which may be displayed when hovered over.
   • Link Type:AnQiCMS offers three flexible link types:
     • Built-in links:Contains the homepage of the website, the article model homepage, the product model homepage, and other custom model homepages. This ensures seamless integration with the core content of the website.
     • Category page links:Allow you to directly link to existing categories on the website (such as "Company News") or single pages (such as "About Us"). This method is especially suitable for integrating important content directly into the navigation.
     • External links:Provided the greatest flexibility, you can enter any internal or external URL address, such as pointing to a social media homepage or a partner website.
   • Display order:By entering a number to determine the sorting of navigation items. The smaller the number, the earlier the navigation item is displayed. Currently, AnQiCMS uses numerical sorting and does not support drag-and-drop sorting functionality.

2. Add a second-level navigation (implement multi-level navigation):To create a multi-level navigation, for example, to set a dropdown menu under a first-level menu item, you just need to select the corresponding first-level navigation item in the 'Parent Navigation' dropdown box.For example, if you want to add "Product A" and "Product B" under "Products and Services", you would select "Products and Services" as the "parent navigation" for "Product A" and "Product B".Then, fill in the information such as 'Display Name', 'Link Type', etc. like configuring the first-level navigation.AnQiCMS currently supports navigation links up to two levels, which is sufficient for most corporate websites to build a clear navigation structure.

Render multi-level navigation in the front-end template

After the background configuration is completed, the next step is to call and render these navigation menus in the website's front-end template. AnQiCMSnavListTemplate tags provide a convenient implementation method.

navListThe core usage of tags

navListThe tag is the main tool you use to render the navigation menu in the AnQiCMS template. Its basic structure is as follows:

{% navList navs %}
    {# 在这里循环输出导航项 #}
{% endnavList %}

here,navsIt is the variable name you define for the navigation list, and you can change it as needed.

`