How to create and display multi-level navigation menus in AnQiCMS?

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) understands this and provides flexible and powerful features for 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 learn together how to create and display multi-level navigation menus in AnQiCMS.

1. Back-end Management: The Basics of 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

Log in to your AnQiCMS backend, find and click on the "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 Category (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 needs 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' section, click 'Add New Navigation Category', enter a meaningful name (such as 'Footer Navigation', 'Sidebar Menu'), save, and you will have an independent navigation area for easy management and future use.

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 nameThis is the text displayed on the navigation menu for users.
• Link TypeAnQiCMS 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 product model home page, and other system preset pages.
  • Category page linkYou can directly select the article category, product category, or single page that you have created as a navigation link to dynamically direct menu items 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 enter the full link address.
• Parent navigation: This is the key to implementing multi-level menus.
  • To createMain MenuPlease select "Top Navigation" as the parent.
  • To createSub Menu(That is the dropdown submenu of the top-level menu), please select an existing top-level navigation from the list as its parent. Currently, AnQiCMS supports two-level navigation configuration directly in the background.
• Display order: The order of menu items is determined by setting the size of the number, the smaller the number, the closer to the front.
• Subtitle name and navigation descriptionThese fields provide additional text information that can be called in the template to make the navigation menu content more rich, such as 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 invocation: Display the navigation menu on the website front-end

After configuring the navigation menu on the back-end, the next step is to display these menu structures on your website's front-end.AnQiCMS uses the Django template engine syntax, through specific template tags, you can render navigation data on the page with great flexibility.

1. Find the template file

Navigation menus are usually found in the public header (header) or sidebar, footer, and other locations on a website. Depending on your template design, you may need to/templateUnder the current template folderbash.html(Public basic template) orpartial/header.htmlEdit files such as (header fragments) etc.

2. UsenavListTag navigation data call

navListIs AnQiCMS specially designed template tag for calling navigation list.

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.navsIs 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, please specifytypeIdReplace with the corresponding category ID.
• {% for item in navs %}: This 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, it will return if the current page matches the navigation itemtrue. You can use this property to add a highlight style to the corresponding navigation item of the current page, enhancing the user experience.
• {% if item.NavList %}This is the key to implementing multi-level navigation.NavListIt is the collection of sub-menus for the current menu item. IfNavListthere is (i.e., there are second-level menus under this first-level menu), then enter the nested loop.
• {% for inner in item.NavList %}This loop will iterate over all second-level navigation menu items, which can also be usedinner.Title/inner.Linkandinner.IsCurrentto render.

3. Enrich your navigation menu: Combine dynamic content

Although the background directly supports two-level navigation, you can create visually richer and deeper-level menus through the flexible combination of template tags.For example, under a second-level menu item, display the latest article list or all subcategory lists associated with it.

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

Assuming you have a top-level navigation "Products", under which there is a secondary navigation "Electronic Products", you want to display several of the latest product articles under the "Electronic Products" category when the mouse hovers over "Electronic Products".

<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 navigate through the second-level menu items of the first-level navigation, byinner.PageIdGained the associated category ID,