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.AnQiCMS (AnQiCMS) with its flexible content management functions, allows us to easily build navigation structures that meet various business needs.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 of Anqi CMS is designed beautifully, it allows 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 for the website as needed, such as footer navigation, sidebar navigation, etc.Under each navigation category, we can add various types of links, which can point to the core content within the website, such as article categories or independent single pages, and can also flexibly link to external websites.This layered and highly customizable design makes the website's content organization structure clear and easy to understand, greatly facilitating users' browsing and access to information.

Configure the main navigation category

To begin building your website navigation, you first need to log in to the Anqi CMS backend management interface.Please navigate to the "Backend Settings" option in the left menu bar and then select the "Navigation Settings" option.On this page, you will see a section 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 wish to have a clearer menu structure management, you can also click the 'Add Navigation Category' button to create a new category, such as naming it 'Main Navigation' or 'Top Navigation'.Once you select or create the main navigation category, all first-level and second-level menus will belong to this specific category for centralized management.

Add primary navigation menu

Next, we will start creating the primary navigation menu item in the "Navigation Link Settings" area.Please click the 'Add Navigation Link' button at the top of the page. The critical step in the subsequent configuration form is the selection of 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, AnQi CMS provides three main types for you to choose from:

• Built-in linkThis type of link is preset to point to common targets such as the homepage of a website, the homepage of a specific content model (such as an article model or product model), etc., making it 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, directing 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 then enter the corresponding link address or select the specific content according to the prompts.The "Display Order" field determines the arrangement position of menu items, the smaller the number, the earlier the menu item is displayed in the navigation bar.

Create a second-level navigation menu

To add a secondary dropdown menu to an established primary navigation, the operation process is very similar to adding a primary menu, but the most critical difference lies in the selection of the 'parent navigation'.You need to click the "Add Navigation Link" button again, in the pop-up form, at this time, "Parent Navigation" should no longer select "Top Level Navigation", but should accurately select the "Display Name" of a first-level navigation you created earlier.For example, if you have set a top-level navigation named 'Product Category', then you should select 'Product Category' as the parent navigation here.Such links as 'electronics', 'home appliances', and the like, which you create, will automatically become a second-level submenu under 'Product Category', and will be displayed in a drop-down form.The settings such as "Display Name", "Link Type", and "Display Order" will follow the same logic as when adding a top-level menu.Our AnQi CMS currently supports up to two levels of navigation, which is enough to build the hierarchical structure required by most websites, ensuring the practicality and ease of use of navigation.

Navigation call in the template

After completing the navigation configuration of the Anqi CMS backend, the next step is to render these carefully set menus to the front end of the website. Typically, this task is performed in the public part of your website template, such asheader.htmlorbase.htmlThese files. Anqi CMS provides a specialnavListtag to retrieve and output the navigation data you have configured.

The following is a basicnavListLabel usage example, it can display a navigation structure containing first and second-level menus:

`twig {% navList navs %} {# Get all navigation data and assign it to the variable navs #}

{%- 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>