How to build a multi-level navigation menu using the `navList` tag and display it on the front end?

AnqiCMS provides powerful and flexible configuration options for website navigation, allowing you to easily build multi-level navigation menus and customize the display on the front-end website according to business needs. Whether it is a simple single-level menu or a complex multi-level menu with dropdown content,navListLabels can help you a lot.

To implement multi-level navigation, we first need to complete the configuration of the navigation structure in the background management system, which lays the foundation for the display on the front end.

Back-end settings: The foundation for building navigation

The background navigation settings of Anqi CMS, located under the "Background Settings" and "Navigation Settings" module. Here, you can intuitively create and manage various navigation menus of the website.

First, you will see the "Navigation Category Management" feature. The system provides a default "Default Navigation" category, but you can create more navigation categories as needed, such as "Footer Navigation", "Sidebar Navigation", etc., which is done by specifying a uniquetypeIdTo distinguish. This classification management method allows navigation at different locations to be independent of each other, making it easier to maintain.

In the specific 'navigation link settings', AnQi CMS supports building up to two-level navigation links.This means you can have a main menu item, as well as a second-level submenu item under the main menu item.

• Parent navigation:Determines whether the current link is a primary menu item (select "Top Navigation") or a submenu item under some primary menu item.
• Display name:This is the text displayed on the front desk navigation, which can be freely named according to needs and does not necessarily match the link content.
• Subtitle name and navigation description:If your design requires, you can add additional text descriptions here for navigation items, so that richer information can be displayed when called on the front end.
• Link Type:This is the key to navigation flexibility. You can choose:
  • Built-in links:Link to the homepage of the website, article model homepage, product model homepage, or other custom model homepage.
  • Category page links:Easily select an existing document category or single page as the navigation target.
  • External links:Allow you to link to any external website address to achieve seamless jumps between internal and external resources.
• Display order:Control the order of navigation items by number size, the smaller the number, the closer it is to the front.

With these settings, you can easily build a clear and layered navigation structure in the background.

Front-end display:navListPractical application of tags

Once the background navigation structure is configured, we can use it in the front-end templatenavListtags to retrieve and display this data.

navListThe basic usage of tags is very intuitive. You need to use{% navList 变量名称 %}...{% endnavList %}structure, where变量名称can be any variable name you want to define, such asnavsThis variable will carry the navigation data configured by the background, and then you can traverse these data and display them on the page.forLoop through these data and display them on the page.

For example, the simplest two-level navigation building code framework is as follows:

{% navList navs %}
<ul class="main-nav">
    {# 遍历所有一级导航项 #}
    {%- for item in navs %}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {# 判断当前一级导航项是否有子导航（NavList 属性） #}
            {%- if item.NavList %}
            <ul class="sub-nav">
                {# 遍历所有二级导航项 #}
                {%- for inner in item.NavList %}
                    <li class="sub-nav-item {% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In the code above,navsThe variable contains all the data of the first-level navigation items. Eachitemobject represents a navigation link, it hasTitle(Display name),Link(link address),IsCurrent(Is it the current page link) and other attributes.

The key to realizing multi-level navigation lies initem.NavListattributes. If a navigation item contains a secondary submenu, thenitem.NavListIt is itself a list, you can place it in the firstforit again within the loop{%- if item.NavList %}Make a judgment and nest one{%- for inner in item.NavList %}Loop to traverse and display the second-level sub-menu items.innerObjects also haveTitle/Linksuch properties.

In addition, you can also usenavListto call specific navigation categories. For example, if you have created atypeIdWith2“Footer Navigation”in the background, you can{% navList navs with typeId=2 %}...{% endnavList %}call and display it.

Rich navigation content: Combine other tags

Navigation menus are not just simple text links, sometimes we also need to display more dynamic content in the dropdown menus, such as the latest products, popular articles, or subcategory lists under a certain category. Anqi CMS'snavListLabel combinationarchiveListandcategoryListContent tags can implement this advanced feature.

1. Display products or articles in the dropdown menu:Assuming one of your navigation items (such as "Product Center") has a secondary menu "Electronicsforloop internally, based oninner.PageIdThe second-level navigation link's corresponding category ID is used,archiveListTags to retrieve and display products.

<ul class="main-nav">
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %} {# 如果有一级子菜单 #}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {# 如果二级菜单链接到分类，则通过 PageId 获取该分类下的产品列表 #}
                {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                {% if products %} {# 如果有产品数据 #}
                <ul class="nav-menu-child-child">
                    {% for productItem in products %}
                    <li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endarchiveList %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

here,productItemThe variable will carry the detailed information of each product, includingLinkandTitle.

2. Show subcategories in the navigation dropdown:Similarly, if your navigation item points to a category and there are deeper subcategories under it, you can usecategoryListLabels dynamically display these subcategories in the navigation dropdown menu.

<ul class="main-nav">
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %} {# 如果有一级子菜单 #}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {# 如果二级菜单链接到分类，则通过 PageId 获取其子分类列表 #}
                {% if inner.PageId > 0 %} {# 确保链接到的是一个分类或页面 #}
                    {% categoryList categories with parentId=inner.PageId %}
                    {% if categories %} {# 如果有子分类数据 #}
                    <ul class="nav-menu-child-child">
                        {% for subCategoryItem in categories %}
                        <li>
                            <a href="{{ subCategoryItem.Link }}">{{subCategoryItem.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

In this way, the navigation menu not only provides the path, but also becomes the entry point of the content, greatly enhancing the usability and user experience of the website.

Tips and suggestions for use

• Planning comes first:Before setting up navigation in the background, it is recommended that you plan the hierarchy and content of the navigation on paper or a mind map to ensure clarity.
• Simple and clear:The navigation "display name" should be concise and clear, allowing users to understand the content it points to at a glance.
• Responsive design:AlthoughnavListThe tag is only responsible for data output, but as a template creator, you need to ensure that the front-end CSS and JavaScript can properly handle the display effect of multi-level navigation on different devices (especially mobile devices), ensuring a good user experience.
• Regular review:The website content will be continuously updated, and the navigation should be reviewed regularly to ensure that all links are still valid and the structure still meets the needs of users and the latest content of the website.

BynavListThe flexible use of tags, combined with the powerful background navigation management function, you can easily build a rich and user-friendly multi-level website navigation in AnqiCMS, providing your visitors with an excellent browsing experience.

Frequently Asked Questions (FAQ)

1. navListDoes the tag support three or more levels of navigation menus? navListThe tag natively supports the most