As an experienced AnQiCMS website operation personnel, I know that a clear and efficient navigation menu is crucial for the website user experience and search engine optimization (SEO).AnQiCMS with its excellent flexibility and customizability, provides us with powerful tools to build and manage 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

AnQiCMS's navigation system design 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, while front-end developers can use intuitive template tags to render the content configured in the backend to any location on the website.This separate design not only simplifies the management process, but also ensures that the website maintains excellent performance when faced with high concurrency access.

Background configuration of multi-level navigation menu

In the AnQiCMS backend management system, the navigation menu configuration 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 the 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 a key step in building multi-level navigation. After clicking on any navigation category (such as "Default Navigation"), you can start adding or editing navigation links.

  1. Add a first-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 navigation link text displayed on the front page, for example, 'Products & Services'.
    • Subtitle Name (optional):If you want to navigate and display subtitles or English titles at the same time, you can fill it here.
    • Navigation description (optional):Used to add additional explanatory text to navigation links, which may be displayed when hovered over.
    • Link type:AnQiCMS offers three flexible link types:
      • Built-in Links:This includes the homepage of the website, the homepage of the article model, the homepage of the product model, and other custom model homepages. This ensures seamless integration with the core content of the website.
      • Category page link: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 particularly suitable for directly integrating important content into the navigation.
      • External links:Provided the greatest flexibility, you can enter any internal or external URL address, such as a link to a social media homepage or a partner website.
    • Display Order:Sort navigation items by inputting numbers. The smaller the number, the earlier the navigation item is displayed. Currently, AnQiCMS uses number sorting and does not support drag-and-drop sorting functionality.

  2. Add secondary navigation (implement multi-level navigation):To create 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 you have created in the "Parent Navigation" dropdown box.For example, if you want to add "Product A" and "Product B" under "Products & ServicesThen, fill in information such as 'Display Name', 'Link Type', etc., just like configuring the first-level navigation.AnQiCMS currently supports up to two-level navigation links, which is sufficient for most corporate websites to build a clear navigation structure.

Implement rendering of multi-level navigation in the front-end template

The backend configuration is completed, the next step is to call and render these navigation menus in the website's front-end template. AnQiCMS providesnavLista convenient way to implement template tags.

navListThe core usage of tags

navListThe label 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.

`