Build clear and ordered website navigation: Practice of AnQi CMS multi-level menu and custom navigation category

Flexibility of AnQi CMS navigation management

Custom navigation categories: meet diversified layout requirements

To create a new navigation category, for example, a "footer navigationHere, you can easily add a navigation category and name it, for example, 'Footer Navigation'.Once created, this new navigation category is like an empty container, waiting for you to fill it with specific navigation links.This way, you can plan independent navigation systems for different page areas based on the design layout of the website, thereby achieving a more refined and personalized website structure.

Build multi-level menus: clear hierarchy for user experience

Created after the navigation category is created, the next step is to add specific navigation links and build the hierarchy.The navigation link settings of AnQiCMS support up to two-level menu structure, which is enough to meet the navigation needs of the vast majority of websites.

When you add a navigation link, you first need to determine its level.Through the 'Parent Navigation' option, you can specify whether the current link is a top-level navigation (select 'Top-Level Navigation') or a sub-navigation of an existing navigation item.This intuitive parent-child relationship setting makes it easy to build multi-level menus.For example, you can set 'Product Display' as a top-level navigation, and then add 'Product A', 'Product B' as secondary sub-navs.

Each navigation link includes rich configuration options.You need to set its 'Display Name', which is the text that users see on the website front end.If your website needs to support dual title display, for example, Chinese and English coexisting, you can also fill in 'Subtitle Name'.“Navigation description” allows you to add a brief introduction text to a navigation item, which can be used in some template designs to provide additional information.

The link type is one of the core settings, AnQiCMS provides three main types:

  • Built-in link：This link points to some special pages预设 within the AnQiCMS system, such as the homepage, article model homepage, product model homepage, and other custom model homepages.This provides convenience for quickly adding frequently used function links.
  • Category page link
  • External Link：For situations where you need to jump to an external or custom internal URL, external links provide the greatest flexibility. You only need to enter the complete URL address here.

Finally, the 'Display Order' field allows you to control the arrangement position of navigation items at the same level by the size of the number, the smaller the number, the earlier it is displayed.Even though drag-and-drop sorting is not supported at the moment, you can still precisely control the display order of navigation by adjusting the numbers.

Call navigation in template: Present backend configuration on the front end

Navigation information configured by the background, which needs to be displayed on the website front-end page through AnQiCMS template tags.{% navList navs %}This is the key tag used to fetch and render the navigation list.

In your website template (such as)header.htmlorfooter.html), you can call and iterate over the navigation data like this:

{% navList navs with typeId=1 %} {# 假设 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 %}

This code snippet demonstrates how to retrieve and iterate over all navigation items within a navigation category, and further check if each navigation item contains a sub-navigation (item.NavList）。If there are sub-navigations, it will traverse the sub-navigation items again, thereby constructing a clear multi-level menu structure. Throughitem.IsCurrentYou can also add specific styles to the currently active navigation item to enhance the user interaction experience.

The value of navigation optimization: a win-win situation for users and search engines

Common Questions and Answers (FAQ)

问：AnQiCMS的导航菜单最多支持多少级？答：AnQiCMS的后台导航管理功能目前支持最多两级菜单结构，即一个主导航项可以带有一层子导航。This has provided enough flexibility and clarity for the navigation design of most websites.

问：I created a new navigation category and link, but it didn't show up on the website front end, what could be the reason?答：If the navigation is set in the background but not displayed on the front, please check several aspects. First, make sure you are using the correct{% navList navs with typeId=X %}labels, andtypeIdThe parameter matches the ID of the navigation category you created in the background. Next, check if there are any syntax errors in the template code, or if there are any conditional judgments that prevent the display when traversing the navigation data (for example, {% if item.NavList %}可能导致没有子导航的父级链接被跳过）。最后，确认您的AnQiCMS缓存已更新，必要时手动清理缓存。

问：EnglishAnQiCMS的导航是否支持将文章分类或单页面直接作为导航项？答：是的，EnglishQiCMS完全支持将已有的文章分类或单页面直接设置为导航项。When adding or editing navigation links, select 'Link Type' as 'Category Page Link', and then you can choose the category or single page you want to reference from the drop-down list.The system will automatically handle its links, saving the trouble of manually copying and pasting URLs.