How to customize the website navigation menu to display multi-level content links?

During the process of building and operating a website, the navigation menu plays a crucial role.It is not only the guidance for users to explore the content of the website, but also the key for search engines to understand the structure of the website.AnQiCMS (AnQiCMS) understands this point and therefore provides flexible and powerful navigation menu customization features, allowing us to easily implement multi-level content link display, thereby optimizing user experience and enhancing the overall efficiency of the website.

Next, we will together learn how to customize and manage the website navigation menu in Anqi CMS, and make it flexible to display multi-level content links.

Step 1: Configure the navigation menu on the backend

The navigation settings of Anqi CMS are concentrated in the background management interface, through simple and intuitive operations, we can define menus at different locations and add rich link content.

1. Access Navigation Settings

First, log in to your AnQi CMS backend. In the left menu bar, find and click "Backend Settings", and then select "Navigation Settings".This is the center where you manage all website navigation.

2. Manage Navigation Categories

After entering the navigation settings page, you will see a "Navigation Category Management" area.The Aanqi CMS defaults to providing a "Default Navigation" category, but this is far from enough.Imagine that your website may need to display the main navigation in the header, the footer may display links or legal statements, the sidebar may display popular categories, and even websites in different languages may need independent navigation.

The AnQi CMS allows you to create multiple navigation categories based on your actual needs.For example, you can add a new category named "Footer Navigation" or "Sidebar Menu".Each category has a unique ID, which will be used in subsequent front-end template calls.With different categories, you can configure dedicated navigation menus for different areas of the website to achieve more fine-grained layout management.

3. Add and Edit Navigation Links

Now, we begin to add specific links for the selected navigation category.Click the 'Add New Navigation' button in the 'Navigation Link Settings' section, or click the 'Edit' button next to an existing navigation.

• Set Link Levels: AnQi CMS supports up to two levels of navigation links, which is enough to meet the needs of most websites.When you add a new link, you can decide its level by selecting the "Parent Navigation" option.If you select "Top Navigation", it will be displayed as a first-level menu item;If a first-level navigation that already exists is selected, it becomes a second-level submenu under that first-level navigation.This hierarchical relationship is the basis for displaying multi-level content.

• Enter Link Display Information:

  • display nameThis is the navigation link text displayed on the front page, and it can be freely modified as needed.
  • Subheading nameIf your navigation needs to display dual titles (such as Chinese-English translation), you can add subtitles here.
  • Navigation description: Provide a brief introduction for the navigation link, which can be used to display tips in some template designs.

• Select link typeThe Anqi CMS provides various link types to meet the needs of different content connections:

  • Built-in linkIncluding the homepage of the website, the article model homepage, the product model homepage, and other custom model homepages.Select these link types, the system will automatically generate the corresponding URL, very convenient.
  • Category page linkThis is the key to connecting multi-level content. You can select from the article categories, product categories, or single pages you have created.In this way, your navigation can directly point to a list page of a certain category or a specific single page, allowing users to quickly find the content they need.
  • External linkIf you need to link to a specific page within the site, an external website, or a custom URL, you can select this option and manually enter the complete link address.

• Adjust display orderEach navigation link can be set to have a 'display order' value, where a smaller number means the link is displayed closer to the top in the navigation menu.Although drag and drop sorting is not currently supported, you can still flexibly control the arrangement of menu items by adjusting the numbers.

After completing the above settings, click “OK” to save your navigation configuration.

Step 2: Front-end template call and display

After the navigation menu is configured on the backend, we need to call and display them in the website's frontend template.The Anqi CMS adopts syntax similar to the Django template engine, using specific tags to retrieve and render data.

1. Core tagnavListUsage of

In the AnQi CMS template system, the core tag used to call the navigation menu isnavList. Its basic usage is as follows:

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

navListThe tag usually needs to be paired withwith typeIdParameter, specify the navigation category ID you created in the background. For example,typeId=1Indicates calling the "default navigation" category.navsis a custom variable name used to receive the navigation data obtained, it is an array object, you need to useforloop to iterate through each navigation item.

Each navigation item (for exampleitem) contains the following fields, which can be called in the template:

• {{item.Title}}：Display name of the navigation link.
• {{item.Link}}：URL address of the navigation link.
• {{item.IsCurrent}}A boolean value indicating whether the current page is this navigation link. It can be used to addactiveStyle.
• {{item.NavList}}This is a key field, if the current navigation item has a sub-navigation, it will contain a sub-navigation list, and you can display a multi-level structure by looping again.

2. Basic two-level navigation display

Based onnavListLabel, we can easily build a basic two-level navigation menu. Please note that this code snippet is just a structural example, and you need to beautify it according to your own CSS style.

<nav class="main-navigation">
    <ul>
    {% navList navs with typeId=1 %} {# 假设1是您的主导航ID #}
        {% for item in navs %}
        <li {% if item.IsCurrent %}class="active"{% endif %}>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if item.NavList %} {# 判断是否有二级导航 #}
            <dl class="sub-menu">
                {% for subItem in item.NavList %}
                <dd {% if subItem.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
        {% endfor %}
    {% endnavList %}
    </ul>
</nav>

This code will iterate through all first-level navigation items, if a first-level navigation item containsNavList(meaning it has sub-navigation), it will loop back to output all the second-level navigation items, thus realizing a two-level menu structure.

3. Expansion: Integrating content lists into navigation.

The strength of AnQi CMS lies in the fact that you can not only link to categories or pages, but also dynamically display the latest articles or product lists under these categories in the navigation menu.This is a very practical feature for the "Multi-level Content Link Display" theme.

Assuming you want to click on a second-level navigation (a category) under a first-level navigation, so that the dropdown menu not only displays the subcategories of this category but also lists the latest documents under this category. This can be achieved by combiningarchiveListorcategoryListTag implementation.

Example 1: Display subcategories and the latest products under the second-level navigation

`twig