How to display the navigation list configured in AnQi CMS and support multi-level dropdown menus?

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

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

Step 1: Configure navigation on the backend - plan your menu structure

Manage website navigation, first you need to start from the Anqi CMS backend.After entering the background management interface, find and click on the "Background Settings" in the left menu bar, and then select "Navigation Settings".This is where you plan and build the navigation command center of your website.

1. Create navigation categories: 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 in different locations on the website (such as the top main navigation, bottom friend link area, sidebar menu, etc.), you can click "Add New Navigation Category" here to create a new category, such as "Footer Navigation" or "Sidebar Menu"。This is like putting labels on different drawers, making it convenient 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 text displayed to the user for the navigation link on the front end, and you can fill it freely as needed.

• Subtitle name and navigation description: If you need to display a subtitle or a brief description (such as bilingual translation or feature introduction) in addition to the main title, you can fill it in here.This information can also be called in the front-end template.

• Link Type: AnQi CMS provides three flexible link types to meet your diverse needs:

  • Built-in linkIncluding quick options for common pages such as home links, article model homepage, product model homepage, etc.
  • Category page link: You 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 link: If you need to link to a specific URL within the site or any 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. Anqi CMS currently supports the most.Two-level navigation linksThat is, a main menu item can contain a dropdown submenu of one level.

  • To createFirst-level navigation(Main menu item), please select 'Top-level 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 primary navigation you previously set as an optional parent.

• Display orderYou can set a number for each navigation link, the smaller the number, the higher the link appears 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.

The second step: Front-end template call - making 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.AnQi CMS adopts Django template engine syntax, through concise template tags, you can call and render navigation data very flexibly.

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

1. Call the basic structure of the navigation list

Generally, you will use it in the website templateheader.htmlorbash.htmland other common filesnavListto 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 tonavsVariable.
• with typeId=1: Specify the navigation category with ID 1 (usually the default navigation). If you have created a 'Footer navigation' category, its ID might be 2, then usewith typeId=2.
• {% for item in navs %}：Traversenavsarray,itemA variable represents the data of each first-level navigation link.
• {{ item.Link }}and{{ item.Title }}: Get the URL and display name of the navigation link respectively.
• {% if item.IsCurrent %}active{% endif %}: This is a very practical feature,IsCurrentThe property automatically determines whether the current page matches the navigation link, and returns if it matchestrue. You can use this property to add a navigation item corresponding to the current pageactiveClass, implement highlighting to enhance user experience.

2. Implement multi-level dropdown menus

To implement multi-level dropdown menus, you need to traverse the first-level navigation items (itemCheck if it contains child navigation (item.NavList). If 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 %}: Determine the current level navigation.itemDoes it haveNavList(Sub-navigation list). Please note-Symbol, it can remove the blank lines generated by tags, making the generated HTML cleaner.
• item.NavListIf it exists, it is also an array that contains the data of the secondary navigation items.
• {%- for inner in item.NavList %}Nested loop traversalitem.NavListAssign the data of each sub-navigation item toinnerVariable.
• {{ inner.Link }}and{{ inner.Title }}：Get the URL and display name of the child navigation link.

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

3. UnderstandnavListLabel parameters and return fields

To use more flexiblynavListUnderstanding the supported parameters and return fields of the label is very helpful:

• typeId(Parameter): Used to specify which navigation category's navigation list to call. For example,typeId=1may correspond to 'main navigation', whiletypeId=2may correspond to 'footer navigation'.
• siteId(Parameter)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.
• Returns field (each)itemorinnerEach object includes):
  • Title: The display name of the navigation item.
  • SubTitle: Subtitle of the navigation item (if set). *