EnglishCMS: Build dynamic dropdown menus for navigation, making content accessible at your fingertips

In website operation, the navigation menu is the starting point for users to explore the website content, and it is also an important clue for search engines to understand the website structure.The traditional navigation menu is often fixed links, when the website content becomes increasingly rich, especially when there are many articles and product types, manually maintaining the content list in the dropdown menu becomes particularly cumbersome and prone to errors.Our Anqi CMS provides an elegant and efficient solution with its powerful content management capabilities, allowing us to dynamically display articles or product lists under categories in the navigation dropdown menu, greatly enhancing user experience and operational efficiency.

Understand the navigation and content association mechanism of EnglishCMS

Configure navigation structure in the background

Firstly, we need to complete the basic navigation structure settings on the backend management interface of AnQi CMS.

  1. Create and manage categories and content modelsEnsure that you have created the required article or product categories and published the corresponding articles or products under these categories.The Auto CMS supports custom content models, you can define different article and product fields according to your business needs.
  2. Set the main navigation itemsEnter the 'Website Navigation Settings' under 'Background Settings'.Here, you can create or edit navigation categories (such as "default navigation" or "footer navigation"), and then add a main navigation link to your website.
  3. Associate navigation with categoriesIn adding or editing navigation links, select 'Link Type' as 'Category Page Link'.At this time, the system will provide a dropdown list for you to select the specific article category or product category you want to associate.This step is the key to implementing a dynamic dropdown menu, which establishes a direct link between the navigation entries and the background content categories.
  4. Create secondary navigation (optional)If your dropdown menu needs a deeper level of structure, for example, with main categories having subcategories, and subcategories displaying article lists, you can continue to create a secondary navigation for the "Category Page Link" in the background, and associate it with specific subcategories.

After completing the background configuration, our navigation structure is already in place. Next, we will implement dynamic content rendering through the tags provided by the Anqi CMS in the template files.

Through template tags to dynamically display content

The template engine of AnQi CMS is similar to Django syntax, using simple tags ({% ... %}) and variables ({{ ... }}To retrieve and display data. To implement a dynamic dropdown menu, we will mainly usenavList/categoryListandarchiveListthese tags.

Assuming our goal is to display all product categories under the main navigation item “Products” in the dropdown menu, and to list several of the latest products directly below each product category.

Firstly, in your template file (usuallybase.htmlorheader.htmldefine the navigation section), we can organize the code like this:

{# 假设我们正在处理一个名为 'navList' 的导航列表，它通过 navList 标签获取 #}
<ul class="main-nav">
    {% navList navList with typeId=1 %} {# typeId=1 通常指默认导航类别 #}
    {%- for item in navList %}
    <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %} {# 检查当前导航项是否有子导航（二级菜单） #}
        <ul class="nav-dropdown">
            {%- for inner in item.NavList %} {# 遍历二级导航项 #}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId > 0 %} {# 如果二级导航项关联了一个分类ID #}
                    {# 获取该分类下的产品列表。moduleId='2' 假设为产品模型ID #}
                    {% archiveList products with type="list" categoryId=inner.PageId moduleId="2" limit="5" %}
                    {% if products %}
                    <ul class="category-product-list">
                        {% for product in products %}
                        <li><a href="{{product.Link}}" title="{{product.Title}}">{{product.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <p class="no-content">暂无相关产品</p>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

The logic of this code is as follows:

  1. {% navList navList with typeId=1 %}This line of code will retrieve all the main navigation items set in the background.typeId=1It usually corresponds to the default navigation.
  2. {%- for item in navList %}We iterate over each main navigation item.item.TitleIs the navigation name,item.Linkis the link address.
  3. {%- if item.NavList %}This is the key.item.NavListThe property will include all secondary navigation items under this main navigation item (if set in the backend). If present, a dropdown menu container will be rendered (for example,nav-dropdown).
  4. {%- for inner in item.NavList %}：We continue to iterate over these secondary navigation items.inner.Titleandinner.Linkis the name and link of the secondary navigation.
  5. {% if inner.PageId > 0 %}：If this secondary navigation item is explicitly linked to a category in the background,inner.PageIdThis is the ID of that category), then we can use this ID to retrieve the content.
  6. {% archiveList products with type="list" categoryId=inner.PageId moduleId="2" limit="5" %}: This is the core of dynamically fetching article or product lists.
    • products：We have defined a variable name for the content list we have obtained.
    • type="list"：It means to get a regular list, not a paginated list.
    • categoryId=inner.PageId：Specify which category of content to get.
    • moduleId="2"：Very important, here it is explicitly told to the system that we want to obtain the content under the "Product" model (usually the "ArticlemoduleId.
    • limit="5"：Limit the display of the latest 5 contents per category to avoid the dropdown menu being too long and affecting the user experience.
  7. {% for product in products %}Finally, we traverse and display these obtained product titles and links. If there is no content,{% else %}part will show "No related products."

Further expansion: Display articles/products under subcategories

If your requirement is to display the subcategories of a main category in the dropdown menu first, and then enter the article/product list by clicking on the subcategory, you can adjustarchiveListThe call method, oritem.NavListreference it ininner.PageIdCall againcategoryListGet deeper levels of classification, and then call under these classificationsarchiveList.

For example, under a main navigation "Solutions

`twig

    {% navList navList with typeId=1 %}
{%- for item in navList %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
    <a href="{{ item.Link }}">{{item.Title}}</a>
    {%- if item.NavList %}
    <ul class="nav-dropdown">
        {%- for inner in item.NavList %}
        <li>
            <a href="{{ inner.Link }}">{{inner.Title}}</a>
            {% if inner.PageId > 0 %}
                {# 这里，我们首先获取 inner 关联分类的子分类 #}
                {% categoryList subCategories with parentId=inner.PageId %}
                {% if subCategories %}
                <ul class="sub-category-list">
                    {% for subCat in subCategories %}
                    <li>
                        <a href="{{ subCat.Link }}">{{subCat.Title}}</a>
                        {# 在每个子分类下，再获取其文章列表 #}
                        {% archiveList articles with type="list" categoryId=subCat.Id moduleId="1" limit="3" %}
                        {% if articles %}
                        <ul class="articles-in-subcat">
                            {% for article in articles %}
                            <li><a href="{{article.Link}}" title="{{article.Title}}">{{article.Title}}</a></li>
                            {% endfor %}