In website operation, a clear and intuitive navigation menu is the core of user experience, which not only guides visitors to find the information they need quickly, but is also an important part of website structure and SEO optimization.AnQiCMS as an efficient enterprise-level content management system, provides flexible and powerful navigation menu building and display features, helping you easily manage the hierarchical structure of the website.
1. Build the navigation menu in the AnQiCMS background
The first step in building a multi-level navigation menu is to perform centralized management in the AnQiCMS backend.You can find the "Navigation Settings" option in the "Background Settings" area, which is the configuration center for all website navigation.
Firstly, you may need to define different navigation areas, such as "top main navigationAnQiCMS supports creating and distinguishing these navigation areas through 'Navigation Category Management'.默认会有一个“默认导航”类别，您可以根据需求新增“页脚导航”等，这样就能为网站的不同位置提供独立的菜单列表。
Then, add specific navigation links for each navigation category. You can flexibly configure each menu item in the "Navigation Link Settings".
- Display name and auxiliary information:Each menu item has a 'display name', which is the text shown to the user by the front-end.If you need more rich display, you can also set 'Subheading Name' and 'Navigation Description', this information can also be called in the template.
- Link type:AnQiCMS provides various link types to meet the needs of different content directions:
- Built-in Links:Contains links to the home page of the website, the home page of the article model, the product model home page, etc., for quick reference.
- Category page link:Allow you to directly select a created document category or single page as a menu item, and the navigation links will also be automatically synchronized when this content is updated.
- External links:If you need to point to external content or a customized internal URL, you can select this option and freely fill in the target address.
- Build multi-level structures:
- Display Order:Each menu item can be set to 'Display Order', the smaller the number, the closer to the front it appears. This allows you to easily adjust the order of menu items.
Through these configurations, you can clearly plan and build a multi-level navigation system that conforms to the website structure in the background.
2. Display multi-level navigation in the front-end template.
Completed the backend menu configuration, the next step is to present these carefully designed navigation menus on the front page of the website.AnQiCMS's template engine uses syntax similar to Django, allowing front-end developers to intuitively call and render backend data.
The core label for displaying the navigation menu isnavList. Use this label to call the corresponding menu data based on the "navigation category" previously defined in the background.
{% navList navs %}
<ul>
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 判断是否存在二级菜单 #}
<dl>
{%- for inner in item.NavList %} {# 循环二级菜单 #}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
In the above code snippet:
{% navList navs %}Retrieves all first-level menu items under the specified navigation category and assigns them.navsa variable.- the outermost
{% for item in navs %}Used to iterate over all first-level menus. {{ item.Link }}and{{ item.Title }}Used to output the link and display name of the menu item.item.IsCurrentIt can help you determine whether the current page being accessed matches the menu item, thereby addingactivehighlight display by class name.{%- if item.NavList %}Is to judge whether there is a second-level submenu under the current first-level menu item. If there is, it will enter the inner layer.{% for inner in item.NavList %}Loop, traverse, and display all second-level menu items, with a calling method similar to that of the first-level menu items.
Expanded Application: Display content in the navigation dropdown menu.
The strength of AnQiCMS lies in the fact that you can not only display simple secondary menus, but also further integrate and display other dynamic content in the dropdown area of the navigation, such as the latest products under a certain category or a subcategory list. This is usually achieved by combiningnavListtags,archiveList(Document list) tag andcategoryListtag to implement.
Assuming you want to display some of the latest products under the "Electronics" category directly when you expand a secondary menu (such as "Electronics
<ul>
{% navList navList with typeId=1 %} {# 假设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>
{% if inner.PageId > 0 %} {# 判断二级菜单是否关联了某个分类ID #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的8个最新产品 #}
{% if products %}
<ul class="nav-menu-child-products">
{% for product in products %}
<li><a href="{{product.Link}}">{{product.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
In the above example,inner.PageIdCan get the category ID associated with the second-level menu, and then we can use this ID toarchiveListLabel to display the latest products under this category. Similarly, if you want to display the subcategory list, just setarchiveListwithcategoryList.
Through these flexible backend configurations and template tags, AnQiCMS makes building and managing multi-level website navigation intuitive and efficient. No matter how complex your website structure is, it can easily achieve clear user guidance.
Common Questions (FAQ)
Q1: Why does my navigation menu only display two levels, and I want more hierarchical menus?AnQiCMS in the background "Navigation Settings" supports by default a maximum of two-level navigation menu structure (i.e., a top-level menu and its sub-menus at the next level).If your business truly needs a menu with more than two levels, we usually suggest you reconsider the complexity of navigation, as deep levels may present challenges for user experience and mobile adaptation.If there are still special requirements, you can consider combining the "Single Page" or "Document Classification" page, and in the content area of the page, use other methods (such as a sidebar tree menu) to display more deeply nested content indexes.
Q2: How to display the latest articles or products of a specific category in the navigation dropdown menu?You can do this in the frontend template,navListLabel loop for first or second level menu items, determine whether the current menu item is associated with a category (throughitem.PageIdorinner.PageIdObtain category ID), and then usearchiveListLabels (used for articles or products) orcategoryListTags (for subcategories) to dynamically call and display the content under the category. The key is to pass parameters.PageIdasarchiveListorcategoryListofcategoryIdParameters.
Q3: Can I set different navigation menus for different areas of the website (such as header, footer)?Yes, AnQiCMS fully supports this.You can create multiple independent navigation categories, such as "Top Navigation" and "Footer NavigationEach category can have its own menu items and structure.navListwhen labeling,typeIdThe parameter specifies the corresponding navigation category ID, which can display different menu lists at different locations.