When building a feature-rich website, a clear and intuitive navigation menu is the core of user experience. AnQiCMS provides a powerful template tag system, wherenavListThe tag is specifically used to build and display multi-level navigation menus on websites.It not only can display the navigation structure you configure in the background, but also helps you convert technical details into user-friendly interactive experiences.
The foundation of navigation construction: backend settings
While 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 'Background Settings' menu under the 'Navigation Settings' feature.
Navigate to the navigation settings page and you will find that the system provides a default "default navigation" category, but you can also create multiple custom navigation categories according to the website layout needs, such as "footer navigation" or "sidebar navigation". Each navigation category has a uniquetypeIdThis 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, all of which can be called in the front-end template.Moreover, 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 'Parent Navigation' option.By selecting an existing main menu item as the "parent navigation" for a submenu item, you can easily create a menu structure with clear levels.AnQiCMS currently supports navigation links up to two levels, that is, a main menu item can contain a first-level submenu.
navListLabel: Magic of frontend navigation
Once the backend navigation structure is configured, it can be used in the frontend template.navListLabels will render them.navListThe usage of tags is very intuitive:
{% navList navs %}
{# 你的导航结构代码 #}
{% endnavList %}
Here, navsis a variable name you can customize, it will receivenavListThe label returns a navigation data collection. This collection is an array object, with each element representing a navigation item, you can useforto iterate over it.
navListThe label 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 the "footer navigation" of 2, so when called in the front-end, it can be written as{% navList footerNavs with typeId=2 %}.siteIdIf you use 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, this parameter is usually not required.
InforIn the loop, each navigation item (such as the code above)itemVariables all contain a series of useful fields that can be used to build rich navigation elements:
Title: The display name of the navigation item.SubTitle: If a subtitle is set in the background, it can be obtained here.Description: Description information of navigation items.Link: The URL address pointed to by the navigation item.IsCurrent: A boolean value indicating whether the current navigation item is a link to the current page, often used to highlight 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 array of navigation items, and you can nest it byforlooping to render the submenu.PageId: If the navigation item links to a category or a single page, the corresponding ID will be stored here. This is very useful when it comes to dynamically loading other content related to the navigation item.
Apply in practice: Build multi-level navigation menus
Let's see through several practical examplesnavListHow 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 dropdown 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 an inner loop will be entered to render these submenus.IsCurrentThe field can help you add navigation items to the current page.activeto provide visual feedback.
2. Navigate dropdown to display related products
If your website is a product showcase type, you may want to display several popular products under the navigation item of a product category when the user hovers over it. This can be done byPageIdandarchiveListTag combination implementation.
Assuming there is a main menu "Product Category" in the background navigation menu, under which there is a submenu "Electronics", and this submenu 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.PageIdwhether it is greater than 0. If it indeed points to a category, it usesarchiveListto pass the tag,categoryId=inner.PageIdto retrieve and display the product list under the category.
3. Navigation dropdown to display subcategories
Another common requirement is that when the main menu item is a certain large category, the dropdown menu can directly display its subordinate subcategories.
`twig