An intuitive and clear navigation system is the key to the success of any website, allowing 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 functions to build and manage the navigation menu of the website, including perfect support for multi-level structures and secondary dropdown menus.
Define your navigation structure in the AnQiCMS background.
The first step to build a multi-level navigation menu in AnQiCMS is to configure it in the background management interface. You can go to“Backend Settings”Area, findNavigation SettingsOptions. This is the center where you manage all website navigation.
Navigation category management: divide navigation areasAnQiCMS allows you to create different navigation categories to meet the needs of different areas of the website.For example, in addition to the default "main navigationIn the 'Navigation Category Management', you can add custom categories according to the layout needs of the website.Each category has a unique ID, which is used when calling from the front end to ensure that you can accurately display the corresponding navigation at the specified location.
Navigation link settings: build menu itemsThis is the core process of 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 specially supportsUp to two levels of navigation linksThis means you can easily implement a second-level dropdown menu under the first-level menu. When adding or editing navigation links, you can do so through“Parent Navigation”Choose an option to determine its level.If selected 'Top Navigation', it will display as a first-level menu; if selected an existing first-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 layout.
Display and Description: Build a user-friendly interfaceYou can set the display name for each navigation item“Display Name”, which is the menu text visitors see on the website. In addition, you can also add“Sub Title Name”and“Navigation Description”Although not all templates use these fields, they provide rich customization space, making your navigation more informative or visually attractive.
链接类型：满足多样化指向需求AnQiCMS提供了多种链接类型，让您的导航可以指向任何内容：
- Built-in linkIncluding the homepage, article model homepage, product model homepage, etc., for quick access to the core function pages of the website.
- Category page link：You can choose any existing article category, product category, or standalone page on the website as a navigation target to ensure that the navigation is closely integrated with the website content.
- External Link：If you need to link to other websites or specific URLs within the site, you can directly fill in external links, with extremely high flexibility.
Display order: control the display order of the menuBy setting“Display order”Numbers, you can easily adjust the arrangement of navigation menu items. The smaller the number, the earlier the menu item is displayed, giving you complete control over the layout of navigation.
Front-end implementation: utilizingnavListTag-based menu display
When 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 a powerfulnavListLabel, it can provide the background configuration data to the template in a structured form.
UsenavListWhen using the label, you can specify the navigation category ID to be called (typeIdfor exampletypeId=1usually corresponds to the main navigation. If your website has enabled the multi-site feature, you can also specify which site's data to call throughsiteIdthe parameter.
navListThe tag will return a list object containing all navigation items. Each navigation item (such asitem) includes the following important fields:Title(Title),Link(Link),IsCurrent(whether it is a link to the current page) and a crucialNavListfield.NavListIt is also a list, which includes all the second-level sub-menu items of the navigation item. This is the key to implementing the second-level dropdown menu.
The following is a simplified and coherent code example that demonstrates how to use tags to build a navigation with a secondary dropdown menu.navListBuild a navigation with a secondary dropdown menu using tags:
<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. Then, by the outer{% for item in navs %}Loop through each first-level menu. For each first-level menu item, we check{% if item.NavList %}To determine whether it exists a second-level submenu. If it exists, render onedropdown-menuof<ul>and within it{% for subItem in item.NavList %}Loop through and display all the second-level submenu items.
Passitem.IsCurrentandsubItem.IsCurrentThe field, you can also easily add an "active" class or other styles to the navigation item corresponding to the current access page to highlight the current position and further enhance the user experience.
Advanced Application: Content Display in Navigation
The navigation system of AnQiCMS is not limited to simple link jumps, it also supports displaying related content directly in the dropdown menu, such as articles under specific categories or subcategory lists. This requires you to combine in the loop of the secondary menu.archiveListorcategoryListLabel.
For example, if you want to display the latest several articles under the category pointed by a secondary dropdown menu, you can use it in the loop of the secondary menu itemsubItemthe loop insidearchiveList:
{# ... (外层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 under the second-level menu itemsubItem.PageId(usually used to store the category or page ID linked to)archiveListLabels, display the latest 5 articles under this category. This method greatly enriches the interactivity and information density of navigation.
Build and display multi-level navigation menus flexibly in AnQiCMS and achieve an intuitive and feature-rich website navigation experience.
Common Questions (FAQ)
Why did I configure the secondary menu, but it didn't show the dropdown effect on the website front-end?This is usually due to your website template not adapting the CSS style or JavaScript interaction for the secondary navigation. AnQiCMS's
navListThe label will correctly output the secondary menu data structure (i.e.,item.NavList），but the frontend visual effects (such as showing a dropdown menu when hovering over the mouse) require corresponding CSS styles and JavaScript code in the template. Please check if there are any styles for your template..has-dropdownor.dropdown-menuStyles and interaction scripts for similar classes.How to highlight the current visited page in the navigation menu?
navListWhen traversing the navigation items, the label will be set for eachitemProvide an item that includes both first and second level menu itemsIsCurrentField, the value of which istrueRepresents the navigation item corresponding to the current page being accessed. You can use conditional judgment in the template{% if item.IsCurrent %}or{% if subItem.IsCurrent %}, and then for the<li>or<a>Add a specific CSS class (such asactive) and define the highlight effect through CSS styles.Does AnQiCMS support creating navigation menus with more than two levels (such as three levels or more)?According to the instructions of AnQiCMS's 'Navigation Link Settings', the system supports it nativelyUp to 2-level navigation links, i.e., the first-level menu and its first-level dropdown menu.If you need a deeper navigation structure, you may need to implement custom template logic or combine with other content display methods, but this usually increases the complexity of template development, and overly deep navigation levels may not be recommended in terms of user experience.