As an experienced AnQiCMS website operations personnel, I know that a clear and efficient multi-level website navigation menu is crucial for user experience and website SEO.AnQiCMS provides a comprehensive mechanism in template design and backend management, helping us easily build such a menu.Next, I will elaborate on how to create a multi-level website navigation menu in the AnQiCMS template.

The website navigation is a map for users to browse the website. A well-designed multi-level navigation can effectively guide users to find the information they need, enhancing the usability of the website.AnQiCMS system is built-in with powerful navigation management functions, and with flexible template tags, it makes creating and maintaining complex navigation structures simple and direct.

Set multi-level navigation in the background management

In AnQiCMS backend, the navigation settings are the foundation for building multi-level menus. First, we need to enter the 'Navigation Settings' page under 'Backend Settings'.

System default will provide a "default navigation" category, but you can also create multiple navigation categories according to your needs, such as "main navigation", "footer navigation", or "sidebar navigation", which is realized through the "navigation category management" feature.Each navigation category can independently manage its sub-navigation links, providing great flexibility for navigation in different areas of the website.

In the specific "Navigation Link Settings", we can define the properties of each navigation item.To create multi-level navigation, the key is to select the 'parent navigation'.

  • Create a primary navigation:Set 'Parent Navigation' to 'Top Navigation'.
  • Create a second-level navigation:Select an existing first-level navigation as its 'Parent Navigation'.

AnQiCMS currently supports up to two-level navigation links, that is, a first-level navigation can include a second-level dropdown menu.For each navigation link, you can set its "display name", "subtitle name", and "navigation description", which information can be called in the front-end template.The link type also provides multiple choices, including "internal links" pointing to internal web pages, "category page links", or "external links" pointing to any external resources.In addition, the "Display Order" field allows you to finely control the arrangement of navigation items.

Implement the rendering of multi-level navigation in the template.

Once the navigation structure is configured in the background, the next step is to render it in the frontend template. AnQiCMS providesnavListtags, which are the core tools for implementing the navigation menu.

We usually place the code snippet of the navigation menu in the template.partial/in the directory, for examplepartial/header.htmland then through{% include "partial/header.html" %}This modular design helps with code reuse and maintenance.

Inpartial/header.htmlIn（or other navigation template files）, usenavListtags to get the navigation data set in the background. If you have created multiple navigation categories in the background, you cantypeIdParameter specifies the navigation category to be called, for example{% navList navs with typeId=1 %}Represents the navigation category with ID 1 (usually the default navigation).

navListThe label will treat the navigation data as an array object (such asnavs）Return. To render multi-level menus, we need to use nestedforloops to iterate over this array:

<ul>
    {% navList navs with typeId=1 %} {# 假设typeId=1是主导航 #}
    {%- for item in navs %}
        {# 判断当前导航项是否为活跃状态，添加active类名 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 检查是否存在下级导航 #}
            <ul class="submenu"> {# 二级导航菜单容器 #}
                {%- for inner in item.NavList %}
                    <li class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
    {% endnavList %}
</ul>

In this example:

  • the outermost{% for item in navs %}loops to iterate over all first-level navigation items.
  • item.IsCurrentVariables can be used to determine whether the current navigation item is the page the user is visiting, making it convenient to addactiveCSS classes to highlight.
  • item.Linkanditem.Titleare used to output the link address and display name of the navigation item.
  • {%- if item.NavList %}It is a key condition judgment, it checks whether the current level navigation item contains sub-navigation.NavListYesitemarray that contains secondary navigation items.
  • nested if there are sub-navigation items.{%- for inner in item.NavList %}The loop will iterate over all the second-level navigation items and output their links and titles as well.

Through this method, we can dynamically render the multi-level navigation menu configured on the backend in the frontend template.

Key considerations

When creating multi-level navigation menus, in addition to the above steps, there are some practices and precautions:

  • Level limit:Remember that AnQiCMS currently supports up to two levels of navigation. If your website requires a deeper navigation hierarchy, you may need to consider combining it with other content list tags (such ascategoryListorarchiveList）to simulate a deeper level of content display, rather than a pure navigation menu structure.
  • Modular:Make full use ofincludeThe label splits the navigation code into reusable small modules. This not only makes the template code cleaner but also facilitates team collaboration and maintenance.
  • Responsive design:Considering the experience of mobile device users, it is essential to work with CSS and JavaScript to handle responsive multi-level navigation to ensure good display and interaction on different screen sizes.
  • Cache update:Each time you modify the navigation settings in the background, if the front-end does not update in time, please remember to clear the system cache to ensure that the latest configuration takes effect.

Through the flexible backend configuration and powerful template tags of AnQiCMS, we can effectively build a multi-level website navigation menu that is both beautiful and practical, thereby enhancing user experience and the overall efficiency of the website.

Frequently Asked Questions

Q1: AnQiCMS navigation menu supports up to how many levels?

AnQiCMS backend navigation settings support up to two levels of navigation menus, that is, a level of submenu can be included under a first-level navigation item.This means you can create main menu items and their direct dropdown submenus.

Q2: How to highlight the navigation menu item corresponding to the current page?

In the template,navListLabel returns each navigation item object (itemandinnerAll contain aIsCurrentfield. This field is returned when the current page matches the navigation item linktrue. You can use conditional judgment in the template, such asclass="{% if item.IsCurrent %}active{% endif %}"Add a specific CSS class to the currently active navigation item to achieve a highlight display effect.

Q3: Can I set different navigation menus for different areas of the website (such as the top, sidebar, footer)?

navListTagstypeIdParameters specify the corresponding navigation category ID, and you can call and render different navigation menus.