How to implement the display of multi-level navigation menus in AnQiCMS and support secondary dropdown menus?

A clear and intuitive navigation system is the key to any website's success, as it can guide visitors to quickly find the information they need and greatly enhance the user experience.AnQiCMS as an efficient content management system provides flexible and powerful features to build and manage website navigation menus, including perfect support for multi-level structures and secondary dropdown menus.

Define your navigation structure in the AnQiCMS backend

The first step in building a multi-level navigation menu in AnQiCMS is to configure it in the backend management interface. You can go to“Background Settings”area, find“Navigation Settings”Option. This is the center where you manage all website navigation.

1. Navigation category management: Divide navigation areasAnQiCMS allows you to create different navigation categories to meet the needs of different website areas.For example, in addition to the default 'main navigation', you may also need a 'footer navigation' or 'sidebar navigation'.In the 'Navigation Category Management', you can add custom categories as needed according to the website layout.Each category has a unique ID, which is used when calling the front end to ensure that you can display the corresponding navigation at the specified location.

2. Navigation link setting: Build menu itemsThis is the core link in creating and organizing specific menu items. In the navigation link settings, you can configure the following key information for each menu item:

   • Hierarchy: Implement first and second-level dropdown menusAnQiCMS special supportUp to two-level navigation linksThis means you can easily implement a second-level dropdown menu under the first-level menu. When adding or editing navigation links, through“Parent Navigation”Option to determine its level. If you choose 'Top-level navigation', it will be displayed as a first-level menu;If you select an existing top-level menu as the parent, it will become a secondary dropdown item under that menu.This design makes the menu level clear and controllable, which is very suitable for common website navigation layouts.

   • Display and Description: Create a user-friendly interfaceYou can set for each navigation item“Display Name”, this is the menu text seen by visitors on the website. In addition, you can also add“Sub Title Name”and“Navigation Description”. Although not all templates use these fields, they provide a rich space for customization, making your navigation more informative or visually attractive.

   • Link types: meet diverse directional needsAnQiCMS provides various link types, allowing your navigation to point to any content:

     • Built-in linkIncluding the homepage, article model homepage, product model homepage, etc., for quick access to the core functional pages of the website.
     • Category page linkYou can choose any existing article category, product category, or standalone page as the navigation target, ensuring that the navigation is closely integrated with the website content.
     • External linkIf you need to link to other websites or specific URLs within the site, you can directly fill in external links, with great flexibility.

   • Display order: control the display order of the menuBy settingDisplay orderThe number, you can easily adjust the order of the navigation menu items. The smaller the number, the earlier the menu item is displayed, giving you complete control over the layout of the navigation.

Front-end implementation: utilizingnavListLabel presentation of menu

After the navigation structure is defined in the background, the next step is how to elegantly present them in the front-end template of the website. AnQiCMS provides powerful features for this.navListThe tag, it can provide structured data from the background configuration to the template.

UsenavListWhen using the tag, you can specify the navigation category ID to be called (typeId), for exampletypeId=1usually corresponds to the main navigation. If your website has enabled the multi-site feature, you can alsositeIdParameters to specify which site's data to call.

navListthe tag will return a list object containing all navigation items. Each navigation item (such asitemThese all contain the following important fields:Title(Title),Link(Link),IsCurrent(Whether it is a link to the current page), and a crucial oneNavListfield.NavListIt is also a list that contains all the secondary submenu items of the navigation item, which is the key to implementing a two-level dropdown menu.

This is a simplified and coherent code example that shows how to usenavListtags to build a navigation with a second-level dropdown menu:

<nav class="main-navigation">
    <ul class="primary-menu">
        {% navList navs with typeId=1 %} {# 假设typeId=1对应主导航 #}
            {% for item in navs %}
                <li class="menu-item {% if item.IsCurrent %}active{% endif %} {% if item.NavList %}has-dropdown{% endif %}">
                    <a href="{{ item.Link }}" {% if item.NavList %}aria-haspopup="true"{% endif %}>
                        {{ item.Title }}
                    </a>
                    {% if item.NavList %}
                        <ul class="dropdown-menu">
                            {% for subItem in item.NavList %}
                                <li class="dropdown-item {% if subItem.IsCurrent %}active{% endif %}">
                                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

In this code, we first use{% navList navs with typeId=1 %}Obtained all the first-level menu items of the main navigation. Next, by the outer{% for item in navs %}Loop through each first-level menu item. For each menu item, we check{% if item.NavList %}To check if there is a secondary submenu. If it exists, render onedropdown-menuof<ul>and within the{% for subItem in item.NavList %}loop to traverse and display all the secondary submenu items.

Byitem.IsCurrentandsubItem.IsCurrentField, you can easily add the 'active' class or other styles to the corresponding navigation item of the current visited page to highlight the current position, thereby enhancing the user experience.

Advanced Application: Content Display in Navigation

The AnQiCMS navigation system is not limited to simple link jumps, it also supports directly displaying related content in the dropdown menu, such as articles or subcategory lists under specific categories. This requires you to combine in the loop of the secondary menu.archiveListorcategoryList.

For example, if you want to display the latest few articles under the category pointed to by a secondary dropdown menu, you can use it in the loop of the secondary menu itemsubIteminside the looparchiveList:

{# ... (外层navList和item循环) ... #}
                    {% if item.NavList %}
                        <ul class="dropdown-menu">
                            {% for subItem in item.NavList %}
                                <li class="dropdown-item {% if subItem.IsCurrent %}active{% endif %}">
                                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                    {# 假设subItem.PageId是分类ID，且我们想展示该分类下的文档 #}
                                    {% if subItem.PageId > 0 %}
                                        {% archiveList articles with type="list" categoryId=subItem.PageId limit="5" %}
                                            {% if articles %}
                                                <ul class="content-list">
                                                    {% for article in articles %}
                                                        <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
                                                    {% endfor %}
                                                </ul>
                                            {% endif %}
                                        {% endarchiveList %}
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
{# ... (外层navList和item循环结束) ... #}

This code demonstrates how to call through a secondary menu item, bysubItem.PageId(usually used to store the category or page ID linked to) to callarchiveListTags, display the latest 5 articles under this category. This method greatly enriches the interactivity and information density of navigation.

By following these steps, you can flexibly build and display multi-level navigation menus in AnQiCMS, achieving an intuitive and feature-rich website navigation experience.

Frequently Asked Questions (FAQ)

1. Why did I configure the secondary menu, but it did not display the dropdown effect on the website front-end?This is usually due to your website template not adapting the CSS styles or JavaScript interactions for the secondary navigation. AnQiCMS'snavListThe label will correctly output the data structure of the second-level menu (i.e.item.NavList），but the front-end visual effects (such as the dropdown menu displayed on hover) require the corresponding CSS styles and JavaScript code in the template to support. Please check if your template has the relevant style for.has-dropdownor.dropdown-menuDefinition of styles and interactive scripts for the same class.

2. How to highlight the current visited page in the navigation menu? navListThe tag will iterate over navigation items and set each one.itemProvide one (including first and second-level menu items)IsCurrentField, its value istrueIt indicates the navigation item that corresponds to the current page being visited. You can use conditional judgment in the template{% if item.IsCurrent %}or{% if subItem.IsCurrent %}Then for the<li>or<a>Add a specific CSS class (for exampleactive), and define the highlight effect through CSS styles.

3. Does AnQiCMS support creating navigation menus with more than two levels (such as three or more)?According to the instructions of AnQiCMS' 'Navigation Link Settings', the system supports it nativelynavigation links up to 2 levels deepThis means the first-level menu and its first-level dropdown menu. If you need a deeper level of navigation structure, you may need to implement custom template logic or combine it with other content display methods, but this usually increases the complexity of template development, and too deep navigation levels may not be recommended in terms of user experience.