When building a fully functional website, a clear and intuitive navigation menu is the core of user experience. AnQiCMS provides a powerful template tag system, whichnavListThe label is a powerful tool used specifically for building and displaying multi-level navigation menus on websites.It not only displays the navigation structure you configure in the background, but also helps you convert technical details into user-friendly interaction experiences.
Build the foundation of navigation: backend settings
When usingnavListBefore the label, you first need to configure the navigation menu in the AnQiCMS backend management interface.You can flexibly define the navigation structure of the website through the 'Navigation Settings' feature under the 'Background Settings' menu.
Enter the navigation settings page, and you will find that the system provides a default "Default NavigationtypeIdThis will be used in subsequent frontend calls.
In the specific navigation link settings, you can specify the "Display Name", "Subtitle Name", and "Navigation Description" for each menu item. This information can be called in the front-end template.It is more important that the "Link Type" determines where the navigation item points to, you can choose to link to the built-in homepage, a specific category page, a single page, or even an external link.
The key to implementing multi-level navigation is the option of 'parent navigation'.You can easily create a hierarchical menu structure by selecting an existing main menu item as the "parent navigation" for a submenu item.AnQiCMS Currently supports navigation links up to two levels, that is, a main menu item can contain a first-level submenu.
navListTag: Magic of frontend navigation
When the backend navigation structure is configured, you can use it in the frontend template.navListTags to render them.navListThe label usage is very intuitive:
{% navList navs %}
{# 你的导航结构代码 #}
{% endnavList %}
Here,navsis a variable name that you can customize, it will receivenavListThe label returns a set of navigation data. This set is an array object, and each element represents a navigation item, you can usefora loop to traverse it.
navListLabel supports several important parameters:
typeIdThis parameter allows you to specify which navigation category of data to retrieve. For example, if you create one in the background,typeIdFor 2's 'footer navigation', then when called in the frontend it can be written as{% navList footerNavs with typeId=2 %}.siteIdIf you have used the multi-site management feature of AnQiCMS and want to call data from other sites, you can specify the site ID through this parameter.For single-site users, it is usually not necessary to fill in this parameter.
Inforin the loop, each navigation item (for example, the one in the above code,itemVariables all include a series of useful fields that can be used to build rich navigation elements:
Title: The display name of the navigation item.SubTitle: If the subtitle is set in the background, it can be retrieved here.Description: Description information of the navigation item.Link：Navigation item points to the URL address.IsCurrent：A boolean value indicating whether the current navigation item is a link to the current page, often used for highlighting the active state.NavListThis is the key to implementing multi-level navigation! If the current navigation item has a submenu,NavListit will be a new navigation item array, which you can nest to render submenus.forYou can use a loop to render the submenus.PageId：If the link of the navigation item is a category or a single page, the corresponding ID will be stored here, which is very useful when dynamically loading other content related to the navigation item.
Actual Application: Build Multi-level Navigation Menus
Let's look at several practical examples to seenavListHow to flexibly build different types of multi-level navigation.
1. Build a basic two-level dropdown menu
This is the most common navigation form, with a drop-down submenu under the main menu.
<nav class="main-navigation">
<ul>
{% navList navs %}
{% for item in navs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %}
<ul class="sub-menu">
{% for inner in item.NavList %}
<li {% if inner.IsCurrent %}class="active"{% endif %}>
<a href="{{ inner.Link }}">{{ inner.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
This code first traverses all top-level navigation items, if a navigation item'sNavListThe field is not empty, which means it has a submenu, and then it will enter an inner loop to render these submenus.IsCurrentThe field can help you add navigation items to the current page.activeClass, providing visual feedback.
2. Navigation dropdown displays related products
If your website is a product showcase, you may want to display several popular products under the category when the user hovers over a navigation item in that category. This can be achieved byPageIdfield andarchiveListLabel combination implementation.
The main menu 'Product Category' is under the background navigation menu, and it has a submenu 'Electronics', which links to a product category page.
<nav class="product-navigation">
<ul>
{% navList navs with typeId=1 %} {# 假设产品导航使用默认typeId=1 #}
{% for item in navs %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %}
<div class="dropdown-content">
{% for inner in item.NavList %}
<div class="category-block">
<h4><a href="{{ inner.Link }}">{{ inner.Title }}</a></h4>
{% if inner.PageId > 0 %}
{# 如果这个子菜单链接的是一个分类页面，则显示该分类下的产品 #}
<ul class="product-list">
{% archiveList products with type="list" categoryId=inner.PageId limit="4" %}
{% for product in products %}
<li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In this example, when traversing to the sub-navigation iteminnerwe checkinner.PageIdif it is greater than 0. If it indeed points to a category, usearchiveListthe label, passed incategoryId=inner.PageIdGet and display the product list under this category.
3. Dropdown navigation to display subcategories
Another common requirement is that when the main menu item is a category, the dropdown menu can directly display its subcategories.
`twig