The website navigation is the key path for users to explore the website content, and it is also an important reference for search engines to understand the website structure.In AnQiCMS, you can flexibly set and manage the top and bottom navigation menus of the website to meet different design and functional requirements.

This article will introduce in detail how to configure the navigation menu in the Anqi CMS backend, as well as how to display it in the website front-end template.

Part One: Configure the Navigation Menu in the Backend

In the Anqi CMS, the navigation menu settings are concentrated in the "Background Settings

1. Manage navigation categories

The AnQi CMS allows you to create multiple independent navigation categories, which is very useful for managing menus at different locations (such as, main navigation, footer navigation, sidebar navigation).

  1. Visit navigation category:After logging into the back-end, find the 'Navigation Settings' under the 'Back-end Settings' menu. You will see an option for 'Navigation Category Management.'
  2. Add a new category:Click to enter, the system will default to have a "Default Category".If you need a standalone bottom navigation, click 'Add Navigation Category', enter a meaningful name, such as 'Bottom Navigation' or 'Footer Menu', and then save.
    • By this method, you can create exclusive navigation structures for different areas of the website, which is convenient for management and maintenance.

Secondly, configure navigation links

After selecting or creating a navigation category, the next step is to add specific navigation links to the category. Each navigation link can be configured in detail:

  1. Select a navigation category:On the "Website Navigation Settings
  2. Add/Edit navigation links:
    • Display Name:These are the texts that users see on the website's front page. They should be concise, clear, and accurately reflect the content of the links. For example, 'About Us', 'Product Center'.
    • Subheading Name:If your design requires, you can display a secondary title below the main title, for example, 'Products' below 'Product'.
    • Navigation description:Add a short description for the navigation item, which may be used to display tips in some template designs.
    • Link type:The AnQi CMS provides three powerful link types to meet your needs for linking to different content:
      • Built-in Links:Suitable for fixed pages on the website, such as the homepage, article model homepage, product model homepage, or other custom model homepages. After selection, the system will automatically generate links.
      • Category page link:You can directly link to the existing categories of articles, products, or single pages on your website (such as the 'Contact Us' page). Select the corresponding content.
      • External links:Provided the greatest flexibility, you can manually input any in-site or external URL address. This is very convenient for linking to third-party services or external cooperative websites.
    • Parent Navigation:To create a dropdown menu or submenu, you just need to set the 'parent navigation' to the corresponding parent menu item when adding a submenu item.The Anqi CMS supports two-level navigation (primary menu, secondary dropdown menu).
    • Display Order:Adjust the size of the numbers to control the arrangement order of navigation items at the same level. The smaller the number, the earlier it is displayed.

Build a navigation menu that meets the website structure and user needs easily in the Anqi CMS backend by following these steps.

Part Two: Displaying the navigation menu in the frontend template

After completing the navigation settings on the back-end, the next step is to display these navigation menus on the front-end web page using template tags. The use of Anqi CMSnavListTags can be used to implement this feature, offering high flexibility to adapt to various complex menu layouts.

First, usenavListTag navigation call

in your website template files (for example)header.htmlused for top navigation,footer.htmlIn the bottom navigation）you can usenavListtags to get the navigation data configured in the background.

An example call is as follows:

{% navList navs with typeId=1 %}
    <ul>
        {%- for item in navs %}
            <li><a href="{{ item.Link }}">{{item.Title}}</a></li>
        {% endfor %}
    </ul>
{% endnavList %}

Here,navsis an array object, containing each navigation link you set in the background.forThe loop will iterate over these links,item.LinkGet the link address,item.TitleRetrieve the display name.

  • typeIdParameters: typeIdis a key parameter to specify which navigation category you want to call. By default,typeId=1usually corresponds to the "default navigation" on the backend. If you have created other navigation categories (such as "bottom navigation"), you need to call it based on its actual location on the backend.typeIdSpecify as required. Check the ID of the navigation category on the "Website Navigation Settings

Second, implement a navigation with a dropdown menu

Anqi CMS'snavListTags support the easy creation of secondary dropdown menus. Each main navigation itemitemmay contain a NavListAttribute, this attribute itself is also a navigation list, representing the sub-menu below.

You can display these sub-menus by nestingforcyclically:

{% navList navs with typeId=1 %}
    <ul class="main-menu">
        {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %} {# 判断是否存在子菜单 #}
                    <dl class="sub-menu">
                        {%- for subItem in item.NavList %} {# 遍历子菜单 #}
                            <dd class="{% if subItem.IsCurrent %}active{% endif %}">
                                <a href="{{ subItem.Link }}">{{subItem.Title}}</a>
                            </dd>
                        {% endfor %}
                    </dl>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

The above code demonstrates how to judgeitem.NavListDoes it exist, if it exists then render a<dl>label as a submenu container, and iterateitem.NavListover the submenu items.item.IsCurrentThe property can be used to determine if the current navigation is in an active state, making it convenient to add styles.

3. Dynamic Display Combined with Content (Advanced Application)

For more advanced requirements, such as directly displaying a list of popular articles or product categories under a navigation dropdown menu, you can combine other content tags (such asarchiveListorcategoryList）to implement. This usually requires navigation items to link to specific categories or pages, and throughitem.PageIdto obtain the corresponding category or page ID.

For example, display popular products under a category in a dropdown menu of a product category:

{% navList navList with typeId=1 %}
    <ul>
    {%- 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 > 0），则加载该分类下的产品列表 #}
                    {% if inner.PageId > 0 %}
                        {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                        {% if products %}
                        <ul class="nav-menu-child-child">
                            {% for product in products %}
                            <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                        {% endarchiveList %}
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
    </ul>
{% endnavList %}

This example shows how to utilizeinner.PageIdto callarchiveListTags, thus dynamically displaying content in navigation, greatly enriching the functionality of the navigation menu.

Tips and **Practice

  • Keep it simple:Avoid too many main menu items and overly deep submenus to prevent users from feeling confused.
  • Semantic naming:The name of the navigation item should be clear and accurate, allowing users to understand the content it points to at a glance.
  • Consistency:Maintain the consistency of navigation style and structure within the website to enhance the user experience.
  • Responsive design: Ensure that the navigation menu displays and operates well on different devices, especially on mobile devices.
  • Search Engine Optimization (SEO):A reasonable navigation structure helps search engines crawl and understand the website content, improving the website's ranking.

Summary

The Anqi CMS provides intuitive, flexible, and powerful functionality for website navigation settings and display. Whether it's a simple top/bottom menu,