How to display first and second level menus and their links in the website's main navigation?

As an experienced website operations manager, I am well aware of the importance of a clear and intuitive navigation system for website user experience and content discovery.The AnQiCMS (AnQiCMS) allows us to easily build navigation structures that meet various business needs, thanks to its flexible content management functions.Today, I will detail how to cleverly set up and display the first and second-level menus and their links in the website's main navigation based on the powerful functions of AnQiCMS.

Understanding the navigation system of Anqi CMS

The navigation system design of AnQi CMS is exquisite, allowing us to create multiple 'navigation categories' for the website.This means that in addition to the traditional main navigation, you can also create different menu groups such as footer navigation, sidebar navigation, etc. as needed.Each navigation category can contain various links, which can either point to core content within the website, such as article categories or standalone pages, or can flexibly link to external websites.This layered and highly customizable design makes the content organization structure of the website clear and easy to understand, greatly facilitating users' browsing and acquisition of information.

Configure the main navigation categories

To start building your website navigation, you first need to log in to the Anqi CMS backend management interface.Please navigate to the left menu bar and select the 'Background Settings' option.In this page, you will see an area named "Navigation Category Management".The system usually provides a default "Default Navigation" category that you can use as your main navigation.Of course, if you want to have a clearer menu structure management, you can also click the "Add Navigation CategoryOnce you select or create the main navigation category, all subsequent first and second-level menus will belong to this specific category for centralized management.

Add a top-level navigation menu

Next, we will start creating the primary navigation menu items in the "Navigation Link Settings" area.Please click the 'Add Navigation Link' button at the top of the page.In the configuration form that pops up next, the critical step is to select the 'Parent Navigation' option.Here, you need to select "Top-level Navigation", which clearly indicates that you are creating a standalone, independent main menu that does not belong to any other menu.

The 'Display Name' field is used to fill in the menu text that users actually see on the website front-end, please ensure that it is clear and concise. The 'Link Type' is the core setting that defines the menu behavior, and Safe CMS provides three main types for you to choose from:

• Built-in link：This link is preset to common targets such as the homepage of the website, the homepage of specific content models (such as article models or product models), etc., which is convenient for quick configuration.
• Category page linkThrough this option, you can easily select the article categories, product categories, or independent single pages created on the website as navigation targets, and direct users to specific content lists or detail pages.
• External LinkIf you need to redirect users to any custom URL within the site or completely jump to an external website, you can select this type and fill in the complete link address. Select the link type that suits your needs and fill in the corresponding link address or select specific content according to the prompts.The “Display Order” field determines the arrangement position of menu items, with a smaller number indicating that the menu item is displayed closer to the front in the navigation bar.

Create secondary navigation menu

Navigation call in template

After completing the navigation configuration of the AnQi CMS backend, the next step is to render these carefully set menus onto the frontend pages of the website. Typically, this task is performed in the public part of your website template, such asheader.htmlorbase.htmlThese files contain. Anq CMS provides a special purpose for this.navListTags, used to retrieve and output the navigation data you have configured.

The following is a basicnavListLabel usage example, it can display the navigation structure that includes primary and secondary menus:

English

{%- for item in navs %} {# 遍历一级菜单项 #}
    <li class="{% if item.IsCurrent %}active{% endif %}"> {# 根据 IsCurrent 属性添加激活样式 #}
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %} {# 检查当前一级菜单项是否包含二级子菜单 #}
        <dl> {# 如果存在二级菜单，则使用 dl 标签包裹 #}
            {%- for inner in item.NavList %} {# 遍历二级菜单项 #}
                <dd class="{% if inner.IsCurrent %}active{% endif %}"> {# 根据 IsCurrent 属性添加激活样式 #}
                    <a href="{{ inner.Link }}">{{inner.Title}}</a>
                </dd>
            {% endfor %}
        </dl>
        {% endif %}
    </li>