The website navigation acts as a 'compass' for users to access the website, and its clarity and ease of use directly affect the user experience and the efficiency of information acquisition.For a corporate website, a well-structured navigation system that supports multi-level dropdowns is essential.AnQiCMS (AnQiCMS) understands this and provides an intuitive and powerful backend configuration feature, allowing you to easily build a navigation menu with a sense of hierarchy.

Next, we will explore how to configure the navigation list in the backend of the Anqi CMS and make it perfectly present the multi-level dropdown effect on the front end.

First step: Configure backend navigation——Plan your menu structure

Manage website navigation, first you need to start from the Anqi CMS backend.Log in to the backend management interface, find and click on the "Backend SettingsHere is the 'command center' where you plan and build your website navigation.

1. Create navigation category：Define your navigation area

On the "Navigation Settings" page, you will see a "Navigation Category Management" area.By default, the system will have a 'Default Navigation' category.If you want to display different navigation content at different locations on the website (such as the top main navigation, bottom friend links area, sidebar menu, etc.), you can click on 'Add New Navigation Category' here to create a new category, such as 'Footer Navigation' or 'Sidebar Menu'.This is like labeling different drawers to make it easy for you to categorize and manage links.

2. Set navigation links：Build your menu items

After creating the navigation category, you can start adding specific navigation links. Click the "Add New Link" button in the "Navigation Link Settings" area at the bottom of the page.

  • Display NameThis is the navigation link text displayed to the user on the front end. You can fill it in freely as needed.

  • Subheading name and navigation descriptionIf you need to display navigation items in addition to the main title, such as a subtitle or a brief description (e.g., Chinese-English translation, or feature introduction), you can enter it here.This information can also be called in the front-end template.

  • Link typeThe Auto CMS provides three flexible link types to meet your diverse needs:

    • Built-in linkIncluding quick options for common pages such as the homepage link, article model homepage, and product model homepage.
    • Category page linkYou can directly select an existing article category, product category, or single page as a navigation link.This means that when you create new categories or pages, they can be easily added to the navigation.
    • External linkIf you need to link to a specific URL within the site or another external website, you can select this option and manually enter the complete URL.

  • Parent navigation: The key to implementing multi-level dropdowns.This is crucial. The Aanqi CMS currently supports up totwo-level navigation links, meaning that a main menu item can include a dropdown submenu at one level.

    • To createprimary navigationMain menu item, please select "Top Navigation".
    • To createSecondary dropdown menuItem, you need to select the "parent navigation" it belongs to from the drop-down list. The system will intelligently recognize the first-level navigation you previously set as optional parents.

  • Display orderYou can set a number for each navigation link. The smaller the number, the earlier the link will be displayed in the navigation list.

After completing these settings, click 'OK', your navigation link will be saved and added to the list. You can repeat this process to gradually build the complete navigation structure.

Second step: Front-end template call - make the navigation vivid on the website

After the background configuration is completed, the next step is to display these carefully designed navigation lists on the website front-end.The AnQi CMS adopts the Django template engine syntax, allowing you to flexibly call and render navigation data with concise template tags.

The core navigation call tag isnavList. It can retrieve all the navigation data you configure on the back-end.

1. Basic structure of calling the navigation list.

Usually, you will find it in the website template.header.htmlorbash.htmlin public files such as.navListUse the tag to render the main navigation.

Here is a basicnavListLabel usage example:

{% navList navs with typeId=1 %} {# 这里的 typeId=1 对应后台的“默认导航”类别ID #}
<ul>
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {# 这里可以添加二级导航的逻辑 #}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In the code above:

  • {% navList navs %}: Declare the navigation list you want to call and assign its data tonavsthe variable.
  • with typeId=1: Specify the navigation category with the call ID of 1 (usually “Default Navigation”). If you created the “Footer Navigation” category, its ID may be 2, then usewith typeId=2.
  • {% for item in navs %}: Traversenavsan array,itemVariables represent the data of each first-level navigation link.
  • {{ item.Link }}and{{ item.Title }}: Retrieve the URL and display name of the navigation link.
  • {% if item.IsCurrent %}active{% endif %}: This is a very practical feature,IsCurrentThe attribute automatically determines whether the current page matches the navigation link, if it matches then it returnstrue. You can use this attribute to add a navigation item corresponding to the current pageactiveCategory, implements highlighting to enhance user experience.

2. Implement a multi-level dropdown menu

To implement a multi-level dropdown menu, you need to iterate over the first-level navigation items (itemCheck if it contains child navigation whenitem.NavListIf it contains, perform another nested loop to render these child navigations.

{% navList navs with typeId=1 %}
<ul class="main-nav">
    {%- for item in navs %}
        <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 检查当前导航项是否有子导航 #}
            <ul class="dropdown-menu"> {# 下拉菜单容器 #}
                {%- for inner in item.NavList %} {# 遍历子导航 #}
                    <li class="dropdown-item {% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In this advanced example:

  • {%- if item.NavList %}: Judge the current level navigationitemIs thereNavList(Sub-navigation list). Please note-symbol, which can remove the blank lines generated by tags, making the generated HTML cleaner.
  • item.NavListIf it exists, it is also an array containing the data of the secondary navigation items.
  • {%- for inner in item.NavList %}Nested loop traversalitem.NavListfor each sub-navigation item, and assign its data toinnerthe variable.
  • {{ inner.Link }}and{{ inner.Title }}Get the URL and display name of the child navigation link.

You can render a clear two-level dropdown menu on the front-end with such a structure.Of course, the specific style (CSS) needs to be written according to your website design to achieve an aesthetically pleasing visual effect.

3. UnderstandingnavListParameters of the tag and returned fields

To use it more flexibly.navListIt is very helpful to understand the parameters and return fields of the label:

  • typeId(Parameters): Used to specify which navigation category's navigation list to call. For example,typeId=1May correspond to 'Main navigation'.typeId=2May correspond to 'Footer navigation'.
  • siteId(Parameters)If you have enabled the multi-site management feature and need to call data from other sites, you can specify the site ID through this parameter.
  • Return field (each)itemorinnerObject contains):
    • Title：The display name of the navigation item.
    • SubTitle：The subtitle of the navigation item (if set). *