How to build and display a multi-level website navigation menu in AnQiCMS?

In website operations, a clear and intuitive navigation menu is the core of user experience, it not only guides visitors to find the information they need quickly, but is also an important part of website structure and SEO optimization.AnQiCMS as an efficient enterprise-level content management system, provides flexible and powerful navigation menu construction and display functions, helping you easily manage the hierarchical structure of your website.

1. Build the navigation menu in the AnQiCMS background

The first step in building a multi-level navigation menu is to manage it centrally in the AnQiCMS backend.You can find the 'Navigation Settings' option in the 'Background Settings' area, which is the configuration center for all website navigation.

Firstly, you may need to define different navigation areas, such as "top main navigation", "footer navigation", or "sidebar navigation".AnQiCMS supports creating and distinguishing these navigation areas through 'Navigation Category Management'.There will be a 'default navigation' category by default, you can add 'footer navigation' and other such according to your needs, so that independent menu lists can be provided for different positions of the website.

Continue, add specific navigation links for each navigation category. In the 'Navigation Link Settings', you can flexibly configure each menu item.

• Display name and auxiliary information:Each menu item has a 'display name', which is the text shown to the user on the front end.If you need a richer display, you can also set the 'sub-title name' and 'navigation description', this information can be called in the template.
• Link Type:AnQiCMS provides various link types to meet the needs of different content directions:
  • Built-in links:Contains home page links, article model home page, product model home page, and other preset links for quick reference.
  • Category page links:Allow you to directly select the created document category or single page as a menu item, and the navigation links will also be automatically synchronized when this content is updated.
  • External links:If you need to point to external content or a custom internal URL, you can select this option and freely fill in the target address.
• Build a multi-level structure:AnQiCMS supports navigation menus up to two levels.By setting the "parent navigation" of the menu item, you can easily specify a link as a submenu under the first-level navigation.For example, if you have a 'Product' top-level navigation, you can add 'Product A', 'Product B', and so on as secondary menu items below it.
• Display order:Each menu item can be set to 'Display Order', the smaller the number, the earlier it appears, making it easy for you to adjust the order of the menu items.

Configure these settings, and you can clearly plan and build a multi-level navigation system that conforms to the website structure in the background.

Secondly, display the multi-level navigation in the front-end template.

After the menu configuration of the background is completed, the next step is to present these meticulously designed navigation menus on the front page of the website.AnQiCMS's template engine uses syntax similar to Django, allowing front-end developers to intuitively call and render backend data.

The core label to display the navigation menu isnavList. Use this label to call the corresponding menu data based on the navigation categories previously defined in the backend.

{% navList navs %}
    <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 %}

In the above code snippet:

• {% navList navs %}Will retrieve all first-level menu items under the specified navigation category and assign them tonavsVariable.
• The outermost{% for item in navs %}Loop used to iterate over all first-level menus.
• {{ item.Link }}and{{ item.Title }}Used to output the link and display name of the menu item.item.IsCurrentIt can help you determine whether the current page you are visiting matches the menu item, thereby addingactiveTo highlight the class name.
• {%- if item.NavList %}Is to determine whether there is a secondary submenu under the current first-level menu item. If there is, it will enter the inner layer.{% for inner in item.NavList %}Loop, traverse, and display all second-level menu items, which are similar to the first-level menu items.

Expanded Application: Display content in the navigation dropdown menu.

The strength of AnQiCMS lies in the fact that you can not only display simple second-level menus, but also further integrate and display other dynamic content in the dropdown area of navigation, such as the latest products under a certain category or subcategory lists. This is usually done by combiningnavListtags,archiveList(Document list) label andcategoryListlabel to implement the (category list)

Suppose you want to display some of the latest products under the "Electronics" category directly when the secondary menu (such as "Electronics") under the primary menu (such as "Product Center") drops down:

<ul>
    {% navList navList with typeId=1 %} {# 假设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 %} {# 判断二级菜单是否关联了某个分类ID #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的8个最新产品 #}
                    {% if products %}
                    <ul class="nav-menu-child-products">
                        {% 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 the above example,inner.PageIdCan get the category ID associated with the second-level menu, then we can use this ID toarchiveListTag the latest products under this category for display. Similarly, if you want to display the subcategory list, just putarchiveListReplacecategoryListJust do it.

Through these flexible backend configurations and template tags, AnQiCMS makes building and managing multi-level website navigation intuitive and efficient. No matter how complex your website structure is, you can easily achieve a clear user-oriented navigation.

Frequently Asked Questions (FAQ)

Q1: Why does my navigation menu only display two levels, and I want more hierarchical menus?AnQiCMS in the background "navigation settings" supports by default the navigation menu structure of up to two levels (that is, the first-level menu and its sub-menus of the next level).If your business truly needs a menu with more than two levels, we usually suggest reconsidering the complexity of navigation, as deep levels may pose challenges to user experience and mobile adaptation.If there are still special requirements, you can consider combining a "single-page" or "document category" page, and display the deeper level content index in the content area of the page in other ways (for example, a sidebar tree menu).

Q2: How to display the latest articles or products in the dropdown menu of the navigation?In the front-end template, you cannavListWhen looping through first or second-level menu items, determine if the current menu item is associated with a category (viaitem.PageIdorinner.PageIdobtaining the category ID), then usearchiveListtags (used for articles or products) orcategoryListLabels (used for subcategories) to dynamically call and display the content of the category. The key is to pass the menu itemPageIdasarchiveListorcategoryListofcategoryIdthe parameter.

Q3: Can I set different navigation menus for different areas of the website (such as the header, footer)?Yes, AnQiCMS fully supports this. You can create multiple independent navigation categories, such as 'Top Navigation' and 'Footer Navigation', under 'Navigation Settings' in the 'Background Settings'.Each category can have its own menu items and structure. In the frontend template, you just need to callnavListwhen using tags, bytypeIdThe parameter specifies the corresponding navigation category ID, which can display different menu lists at different locations.