How to use the `navList` tag to build a website navigation menu with secondary dropdown?

Build a clear and easy-to-use website navigation menu is an important link to improve user experience and website professionalism. In Anqi CMS, we can take advantage of the powerfulnavListLabel, easily implement a secondary dropdown navigation menu, making the website content hierarchical and convenient for visitors to browse.

Next, we will explore how to usenavListLabel, step by step from backend configuration to frontend template rendering, creating a comprehensive second-level dropdown navigation.

1. Backend Settings: Lay a solid foundation for the navigation menu.

To makenavListThe tag plays a role on the front end, and we first need to make the corresponding configuration in the AnQi CMS backend management system.This is like drawing a blueprint for our navigation menu, planning its structure and content.

1. Manage navigation categoriesThe AnQi CMS allows us to create different navigation categories, such as "Top Main Navigation", "Footer Navigation", or "Sidebar Navigation", etc.The system will have a default 'default navigation' category by default.If you need to customize navigation for different locations, you can find 'Navigation Category Management' to add categories under 'Navigation Settings' in 'Backend Settings'.Choose a meaningful name for your navigation, such as "main navigation", which will make it clearer when calling the template.

2. Set navigation linksAfter selecting or creating a navigation category, we can start adding specific navigation links. The key here is how to define the main navigation and the second-level drop-down menu.

   • Primary Navigation (Top Level Menu)When you add a new link, select "Top Navigation" from the "Parent Navigation" option.This is your main menu item.You need to fill in the 'Display Name' (such as 'Product Center'), and select the 'Link Type' (it can be an 'Internal Link' such as the homepage, or a 'Category Page', 'Single Page', or even an 'External Link').
   • Secondary Dropdown Menu (Submenu): To create a secondary menu item, you need to set its 'parent navigation' to the correspondingPrimary NavigationItem.For example, if 'Product Center' is the main navigation, you can create a link named 'Product Category One' and set its 'parent navigation' to 'Product Center'.Similarly, you can choose the appropriate link type to direct users to specific product category pages or product detail pages.

   In this way, the navigation list of the background will form a clear hierarchy, preparing data for the front-end's secondary dropdown effect.Don't forget, each navigation link can also be set to 'display order' to keep your menu neatly arranged.

Second, front-end template: flexible applicationnavListTag rendering menu

After the navigation data is configured in the background, the next step is to pass these data throughnavListThe tag appears on the website front end. Anqi CMS uses a template engine syntax similar to Django, making data calls intuitive.

navListThe basic usage of the tag is like this:

{% navList navs with typeId=1 %}
    {# 这里是导航的渲染逻辑 #}
{% endnavList %}

here,navsis the variable name you specify for navigation data, you can name it according to your preference, for examplemainNav.typeIdThe parameter corresponds to the 'Navigation Category ID' set in the background. If your main navigation category ID is 1, it's shown in the code above.

InnavListInside the tag, we will go throughforTo loop through navigation data. Each loop item (we usually name ititem) contains various information about navigation, such asitem.Title(Display name),item.Link(Link address) and so on. The key to implementing a second-level dropdown menu lies initem.NavListthis field. If a main navigation item has a second-level sub-navigation, thenitem.NavListIt will be an array containing these sub-navigation links.

Below is an example of a basic two-level dropdown menu template code.

<nav class="main-navigation">
    <ul>
        {% navList mainNav with typeId=1 %} {# 假设主导航的ID是1 #}
            {%- for item in mainNav %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {# 判断是否有二级下拉菜单 #}
                {%- if item.NavList %}
                <ul class="dropdown-menu"> {# 下拉菜单容器 #}
                    {%- 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 block:

• We first use{% navList mainNav with typeId=1 %}To get all the main navigation data under the navigation category with ID 1 and assign it tomainNavVariable.
• The outermostforLoop throughmainNavto generate a first-level menu item.item.IsCurrentcan help you add a first-level menu to the current page.activeA class to highlight through CSS.
• {%- if item.NavList %}It is a very critical conditional judgment. It checks if the current top-level menu item contains a sub-navigation list. Ifitem.NavListThere is data, indicating that this is a main navigation item with a dropdown menu.
• Inner layers.forLoop{%- for subItem in item.NavList %}It is used to iterate over and render these secondary submenu items.subItem.TitleandsubItem.LinkThey correspond to the display names and links of the submenus. Similarly,subItem.IsCurrentThe activation status can be used for submenu items.
• In the code{%-and%}between them.-Number is used to remove the empty line occupied by the tag, making the generated HTML code more compact and avoiding unnecessary blank lines.

Advanced Application: Display more dynamic content in the dropdown menu

navListIts power goes beyond this. You can even further combine other tags, such asarchiveList(Document list) orcategoryList(Category list), to display more rich and dynamic content.

For example, in a "Product Center" dropdown menu, you may want to display popular products under each second-level product category:

<nav class="main-navigation">
    <ul>
        {% navList mainNav with typeId=1 %}
            {%- for item in mainNav %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {%- if item.NavList %}
                <ul class="dropdown-menu">
                    {%- for subItem in item.NavList %}
                    <li>
                        <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                        {# 如果二级菜单是分类页面，且有对应的分类ID，可以进一步展示该分类下的文档 #}
                        {%- if subItem.PageId > 0 %}
                        <ul class="sub-dropdown-list"> {# 第三级展示，例如相关产品列表 #}
                            {% archiveList products with type="list" categoryId=subItem.PageId limit="5" %}
                                {% for product in products %}
                                <li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
                                {% endfor %}
                            {% endarchiveList %}
                        </ul>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

In this advanced example, we utilizedsubItem.PageId(If the secondary navigation link type is "Category Page", it will include the ID of the category), and combinearchiveListLabel, list 5 related product documents dynamically under this second-level category. In this way, your navigation menu is not just a simple link, but also a rich mini display area.

Third, style beautification: make the navigation menu more colorful

With a well-structured and rich content, the next step is to use CSS to add styles to your navigation menu, making it beautiful and responsive. Since CSS is highly variable, no specific code is provided here, but remember the following points:

• Use CSS to.dropdown-menuThe class is hidden by default and displayed when the mouse hovers over the parent<li>.
• To adapt for mobile devices, consider using media queries (Media Queries) to convert the dropdown menu into a collapsible menu, enhancing the user experience on mobile devices.
• Make sure the clickable area of the link is large enough for easy user operation.

Summary

Of Security CMSnavListTags provide great convenience and flexibility for building multi-level navigation menus.By using clear hierarchical management on the backend and the clever application of front-end templates, whether it is a simple second-level dropdown or a complex menu integrated with dynamic content, it can be easily realized.A meticulously designed navigation menu, undoubtedly will become a major highlight of the website, effectively guiding users to explore more exciting content.

Frequently Asked Questions (FAQ)

1. Why did the second-level dropdown menu not display even though I followed the steps?