In website construction, a clear and easy-to-use navigation menu is crucial for improving user experience and the overall structure of the website.AnQiCMS provides flexible settings for navigation menu management, allowing users to easily implement nested display of multi-level categories, thereby better organizing website content and guiding visitors to explore.

To implement nested navigation with multi-level categories, we mainly complete it through the 'Navigation Settings' feature of the Anqi CMS backend.This feature is located in the "Background Settings" area, and it not only manages the top main navigation of the website but also allows for the creation of various custom navigations as needed, such as footer navigation or sidebar navigation.

Configure navigation menu: operation guide for backend

Firstly, enter the Anqi CMS backend, find the "Navigation Settings" under "Backend Settings".Here, you will see a 'Navigation Category Management' area.If your website requires multiple independent navigation areas (such as, a main navigation, a footer link navigation), you can add different navigation categories here.The system will have a default 'Default Navigation' category, which we can use directly or create a new one.

Next is setting specific navigation links. In the 'Navigation Link Settings' section, each navigation item is an independent link. The key point here is the 'Parent Navigation' option.

  1. Create a primary navigation:When you create a new navigation link, if you want it to be a main menu item (i.e., a top-level menu), just set the 'Parent Navigation' to 'Top-Level Navigation'.You can specify information such as "Display Name", "Link Type", etc.
  2. Create a secondary navigation (nested):The AnQi CMS supports up to two levels of navigation nesting.To create a secondary menu item, you need to select the primary navigation item you just created under the 'Parent Navigation' option.So, this new link will be nested under this first-level navigation, becoming its submenu.For example, if you have a top-level navigation named 'Product Center', you can set 'Product Category A' and 'Product Category B' as sub-navigations under 'Product Center'.

When setting the link type, Safe CMS provides three commonly used options:

  • Built-in Links:Suitable for linking to specific feature pages of a website, such as the homepage, article model homepage, product model homepage, etc.
  • Category page link:This is the key to combining website content with navigation.You can directly select the created "Document Category" or "Single Page" as a navigation link.For example, if you have created a "News Updates" category in content management, you can select this category in the navigation settings to directly link the navigation item to the news list page.
  • External links:Allows you to flexibly add any internal or external URL addresses.

In addition, the 'Display Order' field allows you to control the arrangement order of navigation items at the same level, with smaller numbers typically appearing earlier, making it easier for you to adjust the display order of the menu according to the website layout.

Display multi-level navigation on the website front-end: template calling method

After completing the background configuration, we need to display these multi-level navigation menus on the website page.This needs to be called through a specific tag in the template file.{{变量}}while the logic control tags use single curly braces and percent signs{% 标签 %}.

You will use to display the navigation menunavListLabel. This label can retrieve the navigation list you have configured in the background and supports multi-level nested output.

Here is a typicalnavListExample of label call, which can display two levels of navigation:

{% 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 this code block:

  • {% navList navs %}Navigated through the list and assigned the result tonavsa variable. If you have created multiple navigation categories in the background, you canwith typeId=Xspecify which category to call by using
  • the outermost{% for item in navs %}Loop is used to iterate over all first-level navigation items. Eachitemrepresents a navigation link, itsTitleis the display name,Linkis the link address.
  • {% if item.NavList %}Determine if the current level navigation item contains a submenu. If it does,item.NavListit will be an array containing all the secondary navigation items.
  • inner layers of the{% for inner in item.NavList %}the loop is used to iterate through the secondary navigation items.inneralso haveTitleandLinksuch properties.
  • {% if item.IsCurrent %}active{% endif %}This judgment can be used to add navigation items corresponding to the current page.activeclass, which is convenient for highlighting with CSS styles to enhance user experience.

By using such a template structure, you can clearly display the multi-level navigation menu configured on the backend on the website page. If your navigation items link to specific category pages (such as article categories, product categories), you can even further call them under the second-level navigation itemsarchiveListTags, display some articles or products under this category to form a richer content display effect.

The navigation settings of AnQi CMS are designed to provide an intuitive and powerful menu management solution.By reasonably planning the navigation structure of the backend and appropriately calling it in the template, your website will have a multi-level navigation system that is both aesthetically pleasing and efficient, effectively enhancing the browsing experience of users on the website.

Common Questions (FAQ)

1. How many levels of nesting does the Anqi CMS navigation menu support?The navigation menu of AnQi CMS currently supports up to two levels of nesting. This means you can set up a primary menu and its corresponding secondary submenus.

2. How do I add the 'Article Category' or 'Product Category' of the website to the navigation menu?When creating or editing a navigation link in the background 'Navigation Settings', select 'Link Type' as 'Category Page Link', and then choose the 'Document Category' or 'Single Page' you want to link from the pop-up list.

Why does the front-end page only show the first-level menu when I set the second-level menu?This is usually due to the template file not being properly written or configured to display the secondary menu. Please check if your template code uses something similar{% if item.NavList %}such logic to judge and loop through the sub-menu items, ensuring the template can recognize and renderitem.NavListThe content. Also, make sure that the background's 'parent navigation' settings are correct, ensuring that the second-level menu is indeed associated with the first-level menu.