In website operation, a clear and effective navigation menu is the core of user experience, which can help visitors quickly find the information they need.AnQiCMS (AnQiCMS) knows this and provides flexible and powerful features, allowing you to easily create and manage multi-level navigation menus, whether it is a simple two-level dropdown menu or a complex menu combined with dynamic content display, it can meet your needs.

Next, we will together learn how to create and display multi-level navigation menus in AnQiCMS.

1. Background Management: The foundation for building navigation menus.

The first step to create a multi-level navigation menu is to set it up in the AnQiCMS backend management interface. Here, you can not only define menu items but also plan their hierarchical relationships.

1. Access navigation settings

Login to your AnQiCMS backend, find and click on 'Backend Settings' in the left menu bar, and then select the 'Navigation Settings' option.This is the center where you manage all website navigation.

2. Create navigation categories (optional, but recommended)

AnQiCMS provides a category named 'Default Navigation' by default, which is usually used for the main navigation of the website.If your website requires multiple navigation areas, such as top main navigation, footer navigation, sidebar navigation, or special navigation for specific scenarios, you can create new navigation categories.

In the "Navigation Category Management

3. Add navigation links: Define menu structure

This is the core step to create multi-level navigation. In the "Navigation Link Settings" area, you will see the "Add Navigation Link" button. Click it to start defining your menu items.

  • Display Name：This is the text displayed on the navigation menu to the user.
  • Link Type：AnQiCMS provides three flexible link types, you can choose according to your needs:
    • Built-in linkincluding the home page of the website, the home page of the article model, the home page of the product model, etc., which are system preset pages.
    • Category page link：You can directly select the created article category, product category, or single page as the navigation link, so that the menu item dynamically points to your content.
    • External Link：If you need to link to an external website or a custom URL within the site, you can select this option and fill in the complete link address.
  • Parent Navigation：This is the key to implementing a multi-level menu.
    • to createTop-level MenuPlease select "Top-level Navigation" as the parent.
    • to createSub-menu(i.e., the dropdown submenu of the first-level menu), please select an existing first-level navigation as its parent from the list. Currently, AnQiCMS supports the configuration of two-level navigation directly in the backend.
  • Display OrderThrough setting the number size, determine the order of menu items, the smaller the number, the closer to the front.
  • Subheading name and navigation descriptionThese fields provide additional text information that can be called in the template to make your navigation menu content richer, for example, adding English translations or brief introductions to menu items.

Repeat the above steps, you can add multiple first-level menus for different navigation categories, and create corresponding second-level sub-menus under these first-level menus to build a clear navigation hierarchy.

二、Template Call: Display navigation menu on the website frontend

The next step after configuring the navigation menu in the background is to display these menu structures on your website frontend.AnQiCMS uses the Django template engine syntax, through specific template tags, you can render navigation data to the page very flexibly.

1. Find the template file

Navigation menus usually appear in the public header (header) or sidebar, footer, and other positions. According to your template design, you may need to/templateThe current template folder under the directory.bash.html(Public Basic Template) orpartial/header.html(Header Fragment) and other files for editing.

2. UsenavListNavigation data for tag calls

navListThis is a template tag designed specifically for calling the navigation list by AnQiCMS.

You can use the following basic structure to call navigation data:

{% navList navs with typeId=1 %}
    <ul>
        {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %} {# 判断是否有下级导航 #}
                <dl>
                    {%- for inner in item.NavList %} {# 遍历二级导航 #}
                        <dd class="{% if inner.IsCurrent %}active{% endif %}">
                            <a href="{{ inner.Link }}">{{inner.Title}}</a>
                        </dd>
                    {% endfor %}
                </dl>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}
  • {% navList navs with typeId=1 %}This tag is used to get navigation list data.navsIt is the variable name you define for the navigation list,typeId=1represents the navigation category with ID 1 (usually the default navigation). If you have created other navigation categories, pleasetypeIdReplace with the corresponding category ID.
  • {% for item in navs %}: It will iterate through all the first-level navigation menu items.
  • item.Titleanditem.Link: Used to display the menu item name and link address.
  • {% if item.IsCurrent %}:IsCurrentis a boolean value, if the current page matches the navigation item, it will returntrue. You can use this property to add a highlight style to the corresponding navigation item of the current page, improving the user experience.
  • {% if item.NavList %}: This is the key to implementing multi-level navigation.NavListIs the collection of sub-menus of the current menu item. IfNavListexists (i.e., there are secondary menus under this first-level menu), then enter the nested loop.
  • {% for inner in item.NavList %}This loop will iterate over all secondary navigation menu items, which can also be used.inner.Title/inner.Linkandinner.IsCurrentto render.

3. Enrich your navigation menu: Combine dynamic content

Although the backend supports two-level navigation directly, you can create menus that are more visually rich and have deeper levels through the flexible combination of template tags.For example, under a second-level menu item, display the latest article list or all sub-category lists associated with it.

Example: Display the latest articles under the second-level menu item

假设您有一个一级导航“产品”，其下有一个二级导航“电子产品”，您希望在鼠标悬停在“电子产品”上时，除了显示“电子产品”链接，还能显示“电子产品”分类下的几篇最新产品文章。

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId > 0 %} {# 假设PageId存储了关联的分类ID #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                    {% if products %}
                    <ul class="nav-menu-child-child">
                        {% for product in products %}
                        <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

In this example, we are in the second-level menu item of the first-level navigation, byinner.PageIdObtained the associated category ID,