How to dynamically display the website navigation menu in Anqi CMS, including secondary or multi-level dropdown menus?

In website operation, a clear and intuitive navigation menu is the cornerstone of user experience.A well-designed navigation system, not only helps visitors quickly find the information they need, but also effectively guides them through the browsing path within the website, which has a significant impact on the website's usability and SEO performance.AnQi CMS understands its importance and provides a flexible and powerful navigation management function, allowing you to easily implement dynamic, multi-level navigation menus without writing complex code.

Next, we will explore how to build and manage these dynamic navigation menus in Anqi CMS, including how to implement navigation with secondary and even deeper dropdown effects.

Backend configuration: build the navigation menu skeleton

The navigation menu management of AnQi CMS is located in the back-end "Backend settings" module, click "Navigation settingsEnter here. This is where you define and organize all the website navigation.

1. Manage navigation categories: Categorize your menu.

First, you can define different navigation categories to meet the menu needs of different areas of the website.By default, the system will provide a "default navigation" category.Customize navigation categories”Function, easily add new categories, such as "Footer Navigation" or "Sidebar Navigation". Each category has a unique ID, which is used when calling the front-end template.

2. Add and organize navigation links: Create first and second-level menus

Under the navigation category you choose, you can start adding specific navigation links. Anqi CMS supports it natively.Two-level navigationThis means that each main menu item can contain a layer of dropdown menu.

• Create a first-level menu:When adding navigation links, select “Parent navigationSet to 'Top Navigation' to create a main menu item.You can fill in the "Display Name", "Subheading Name" (if your design requires dual titles) and "Navigation Description".
• Create a secondary menu:To create a dropdown menu, simply add a new link and set the "Parent navigationSpecify the top-level menu item you want it to belong to. This way, the newly created link will become a submenu of the top-level menu.

3. Choose the appropriate link type: Connect your content

AnQi CMS offers a variety of link types, allowing you to flexibly connect the navigation menu to various parts of the website:

• Built-in links:Contains the "Home Link
• Category page links:You can directly select any existing 'document category' or 'single page' as a navigation link on the website.For example, you can link to the "About Us" page or a list page of a product category.
• External links:Allow you to input any external URL, whether it is an internal page or an external website, it can be easily integrated into your navigation.This is very useful for guiding users to partner websites or specific promotional pages.

4. Adjust display order: Arrange menu position

Each navigation link can be set to have a 'display order' value, the smaller the number, the closer the link is displayed in the menu.By adjusting these numbers, you can precisely control the arrangement position of menu items.

Front-end implementation: The magic in the template

In the Anqi CMS template file, dynamic generation of navigation menus mainly relies onnavListLabel. It will retrieve the navigation data you have configured from the background, and then you can use loop structures to build the HTML menu.

1. Implementation of basic navigation menu (level 1 menu)

First, in your template file (for exampleheader.htmlorbase.htmlIn it, you can usenavListtags to get navigation data. By default,typeIdis 1, corresponding to the "default navigation" category in the background. If you create other navigation categories, you need totypeIdThe parameter is set to the ID of the corresponding category.

{# 获取ID为1（默认）的导航类别下的所有导航数据 #}
{% navList navs with typeId=1 %}
<nav class="main-navigation">
    <ul>
        {%- for item in navs %} {# 遍历一级菜单项 #}
        <li {% if item.IsCurrent %}class="active"{% endif %}>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
        </li>
        {% endfor %}
    </ul>
</nav>
{% endnavList %}

This code generates a simple first-level navigation menu.item.IsCurrentThe variable is very useful, it automatically determines whether the current page visited matches the navigation link, and you can use it to add highlighting to the current pageactivethe class name.

2. Implement a secondary dropdown menu

To implement a secondary dropdown menu, you need to check within the loop that iterates over the first-level menu items if the current menu item has a submenu (item.NavList). If there is, nest another one.forto loop through