How to build a multi-level navigation menu in AnQiCMS to optimize the display of the website structure?

The website's navigation system, like a city map, guides visitors to explore every corner of your website. A clear and intuitive multi-level navigation can greatly enhance user experience and is an indispensable part of Search Engine Optimization (SEO), helping search engines better understand the structure of the website and thus improve content inclusion and ranking.In AnQiCMS, building a set of efficient and beautiful multi-level navigation menus is actually simpler than you imagine. It provides flexible backend configuration and powerful template tags, allowing you to easily implement it.

Build the navigation foundation: start from the background configuration

Build multi-level navigation in AnQiCMS, we first need to go to the "background settings" area of the backend, find the "navigation settings" feature.This is the command center of all your navigation menus.

1. Navigation category management: Define menu location

In the "Navigation Settings", you will find a "Default Navigation" category.This is usually used for the top navigation bar of a website. But your website may also need different menu layouts in the footer, sidebar, and even on mobile.AnQiCMS very considerately allows you to create multiple navigation categories, such as you can add a category named "footer navigation" or a category named "mobile menu".The benefit of doing this is that you can customize exclusive navigation content for different locations and scenarios, without interference, and it is also easier to manage.

2. Navigation link settings: Fill menu content

After defining the navigation categories, the next step is to fill in specific links for these categories.The navigation link settings of AnQiCMS support up to two levels of navigation, which means you can implement a primary menu and a first-level dropdown submenu structure.

When adding a new navigation link, you will see the following key settings:

• Parent navigation:This is the core of implementing multi-level navigation. If you want to create a main menu item, select 'Top-level navigation';If you want it to become a submenu of a main menu item, just select the corresponding parent menu item from the dropdown list.
• Display name:This is the text displayed on the front page navigation. You can set it flexibly and it does not necessarily have to be consistent with the page title linked to, in order to be more concise or more attractive.
• Subtitle name and navigation description:If your design requires, you can add a subtitle or a brief description to the navigation items, which can be used to enrich the display information of some featured templates.
• Link Type:AnQiCMS provides three flexible link types to meet various content organization needs:
  • Built-in links:Used for the website homepage, article model homepage, product model homepage, and other custom model homepages. After selection, the system will automatically fill in the corresponding links.
  • Category page links:This is a convenient way to directly use the categories (such as "Company News", "Product Categories") or single pages (such as "About Us", "Contact Us") you create in AnQiCMS as navigation items.You just need to choose from the list.
  • External links:When you need to link to a specific URL within the site or an external website (such as a partner's official website, social media homepage), you can select this option and manually enter the complete URL address.
• Display order:You can control the order of navigation items by setting numbers, the smaller the number, the closer the navigation item is to the front of the list.Currently, AnQiCMS uses numerical sorting, and in the future, it will also support drag-and-drop sorting to further improve the convenience of operation.

By following these steps, you can build a clear multi-level navigation menu system in the AnQiCMS backend.

Template call: Let the navigation appear on the website.

The background configuration is complete, and the next step is how to display these carefully designed navigation menus on the website front-end. The AnQiCMS template system uses syntax similar to the Django template engine, bynavListLabel, you can very conveniently call out the navigation data configured on the back-end.

1. UnderstandingnavListTag

navListThe tag is the key to calling navigation data in the AnQiCMS template. Its basic usage is{% navList navs %}{% endnavList %}of whichnavsThe variable name you define for the navigation list. You can customize it according to your preference.

If you want to call the menu under a specific "navigation category", such as the "footer navigation" created earlier, you can do so bytypeIdto specify the parameters:{% navList footerNavs with typeId=2 %}{% endnavList %}(Here, thetypeId=2Assuming the "footer navigation" ID is 2 in the background, you can view it in the navigation category management in the background).

navsThe variable is an array object, you need to useforLoop to traverse each navigation item (item)。EachitemincludesTitle(Display name),Link(link address),IsCurrent(whether it is a link to the current page) and other fields. Most importantly, if a navigation item contains a sub-menu, itsNavListThe field will also be an array, and it can be achieved through nested structuresforto iterate in a loop.

2. Nested structure to implement multi-level navigation

To implement the display of two-level navigation, you need to use the nested list structure of HTML and combinenavListlabel'sNavListthe subfield to loop:

<nav>
    <ul class="main-nav">
        {% navList navs with typeId=1 %} {# 假设1是主导航的typeId #}
            {% for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %} {# 判断是否有子菜单 #}
                        <ul class="sub-nav">
                            {% for subItem in item.NavList %}
                                <li class="{% if subItem.IsCurrent %}active{% endif %}">
                                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

In this code, the outermostulrepresents the first-level menu, the innerulIt will pass.item.NavListto implement the second-level dropdown menu.IsCurrentThe field can help you add links to the current page you are visitingactiveThe class name can be used to highlight and further optimize the user experience

3. Dynamic content combined with navigation

AnQiCMS template tags have very high flexibility, you can even display links in the second-level navigation, as well as dynamically display the list of articles under the category or even deeper subcategories.This can bring richer interaction and information display to your website.

For example, under a second-level menu of a product category, you may want to directly display several popular products under that category:

`html