How to dynamically generate and display the top or bottom navigation menu of a website?

In website operation, the top and bottom navigation menus play a crucial role, not only as guides for users to explore the content of the website, but also as key to search engines understanding the structure of the website.A well-designed, dynamically generated navigation menu that can greatly enhance user experience and website maintainability.AnQiCMS provides a user-friendly and powerful set of features to help you achieve this goal.

Background configuration: Bring your menu to life

To dynamically generate and display the navigation menu in Anqi CMS, you first need to configure the menu content in the background.This is like drawing a map for your website, planning various destinations.

You can find it in the background: Backend settingsModule, click to enter and selectWebsite navigation settings. This is the centralized management area for all navigation menus.

Firstly, you can define differentnavigation category. The system usually provides a default navigation, but if your website needs multiple independent navigation areas, such as one at the top, one at the bottom, or different menus in the sidebar, you can create new navigation categories here.For example, you can create a new category named 'Footer Navigation' specifically for the website footer.This way, different navigation areas can be independently managed without interference.

Next isNavigation link settingsThis is the section for filling menu content. When adding new navigation links, you will see the following important configuration items:

• Parent navigationThis option allows you to easily build a multi-level dropdown menu.If you want the current link to be a top-level menu item, select "Top Navigation";If it should be a submenu of an existing menu item, select the corresponding parent menu.AnQi CMS currently supports two-level navigation, which is enough to meet the needs of most websites.
• display nameThis is the text displayed on the front page navigation link. You can set it flexibly and it does not necessarily have to match the name of the content pointed to by the link.
• Subtitle name and navigation descriptionThese fields provide additional display space. If your navigation needs richer text information, such as English subtitles or brief descriptions, you can enter them here for easy front-end template calls.
• Link TypeThis is the core definition of where the navigation link points. Anqi CMS provides multiple options:
  • Built-in link: Includes the home page, content model home pages (such as article model home pages, product model home pages, etc.), these are the commonly used links preset by the system.
  • Category page link: You can directly select any created article category, product category, or single page as a navigation link.
  • External linkIf you need to link to external resources or other custom URLs, you can select this option and enter the complete link address.
• Display order: By adjusting the size of the number, you can control the order of the menu items, with smaller numbers appearing earlier.

With these flexible configurations, you can intuitively build various complex navigation menus in the background without touching any code.

Front-end template: Turn configurations into a visual menu

After you configure the navigation content in the background, the next step is to display this data on the website's frontend page.The Anqi CMS template system adopts a syntax similar to the Django template engine, which is concise and efficient, making technical information easy to understand and apply.

In the template file, we mainly usenavListthis tag to get navigation data. This tag's function is to dynamically extract the navigation list you have configured from the background database.

The navigation menu code is usually placed in a common template file (such asbase.htmlorpartial/header.html/partial/footer.html), and then referenced by{% include %}tags on various pages.

A basic single-level navigation menu template code is roughly as follows:

{# 假设这是您的顶部导航区域 #}
<nav class="main-navigation">
    <ul>
        {% navList navs with typeId=1 %} {# typeId=1 通常指代默认导航类别 #}
            {% for item in navs %}
                <li {% if item.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

This code first uses{% navList navs with typeId=1 %}tags to retrievetypeIdAssign all navigation data for 1 (i.e., the default navigation category) tonavsvariable. Then, by{% for item in navs %}Loop through each navigation item. EachitemIt includes such asTitle(Display name),Link(link address),IsCurrentProperties such as (whether it is a link on the current page), you can call them as needed.{% if item.IsCurrent %}This code is very useful, it can help you add highlight styles to the navigation menu items corresponding to the current page, enhancing the user experience.

If your navigation menu includes a secondary dropdown menu, the code will be slightly more complex, but the core logic is still nested loops:

{# 包含二级下拉菜单的顶部导航 #}
<nav class="main-navigation">
    <ul>
        {% navList navs with typeId=1 %}
            {% for item in navs %}
                <li {% if item.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ item.Link }}">
                        {{ item.Title }}
                        {% if item.NavList %}<i class="arrow-down"></i>{% endif %} {# 如果有子菜单，显示一个小图标 #}
                    </a>
                    {% if item.NavList %} {# 判断是否有下级导航 #}
                        <ul class="submenu">
                            {% for sub_item in item.NavList %}
                                <li {% if sub_item.IsCurrent %}class="active"{% endif %}>
                                    <a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

Here, we use{% if item.NavList %}To determine if the current main menu item has a submenu. If it does, use one more time.{% for sub_item in item.NavList %}Loop to render the submenu items,sub_itemSimilarly, have.Title/Link/IsCurrentsuch properties.

Through such a template structure, any modification you make in the background configuration will be immediately reflected on the website front-end, realizing the true meaning of dynamic menus.

Practical Tips and **Practice**

• SEO friendlyEnsure you use meaningful text as the 'Display Name' when setting navigation links, as this helps search engines understand your website content. For links to external websites, you can manually add them in the front-end code.rel="nofollow"Property, prevent unnecessary weight loss, or select when configuring links in the backgroundNofollow.
• Enhancing user experience:
  • Clear hierarchyAvoid deep navigation levels, usually two to three levels are enough for users to quickly find the information they need.
  • Responsive DesignEnsure that your navigation menu displays and operates well on different devices (such as mobile phones, tablets).The Anqi CMS supports adaptive, code adaptation, and PC+mobile independent site mode, providing a foundation for responsive navigation.
  • Highlight the current pageUtilizeitem.IsCurrentThe attribute adds a prominent style to the navigation items on the user's current page, helping users maintain a sense of direction.
• Maintain convenience.All navigation content is managed in the background, no need to modify the template code, which greatly reduces the maintenance cost and error rate of daily operations.
• Multi-site applicabilityThe AnQi CMS multi-site management feature allows each site to have its own independent navigation configuration, even if you are managing multiple websites, you can maintain the flexibility and customization of each site.

AnQi CMS provides a user-friendly backend management interface and flexible template tags, making it extremely simple and efficient to dynamically generate and display the top or bottom navigation menu of a website.Whether it is an official website of a small and medium-sized enterprise, a personal blog, or a content marketing platform, you can easily handle it, making the website menu a powerful helper to guide users to explore in depth.

Frequently Asked Questions (FAQ)

Q1: Why did the front page not update after I modified the navigation settings on the backend?A1: AnQi CMS usually enables caching to enhance website performance.If you have modified the navigation settings in the background but they do not take effect on the front end, you can try clearing the system cache.In the background management interface, there is usually an 'Update Cache' feature entry, click on it, wait for a few seconds, and then refresh the front page to see the update.

Q2: How to set different content for different navigation areas (such as top menu and bottom menu)?A2: In the Anqi CMS backend "Website Navigation Settings", you can create multiple "Navigation Categories".For example, you can create a navigation bar named "Top Main Navigation", and then create a navigation bar named "Footer Auxiliary Navigation".call in the templatenavListwhen using tags, bytypeIdThe parameter specifies the calling of different navigation categories, for example{% navList topNavs with typeId=1 %}(Assuming 1 is the top navigation ID) and{% navList footerNavs with typeId=2 %}(Assuming 2 is the footer navigation ID).

Q3: Can the navigation menu link to external websites or my custom specific URL?A3: Of course, you can. When adding or editing navigation links in the "Website Navigation Settings" backend, set the "Link Type" to "External Link", and then directly enter the external URL or custom path you want to point to in the "Link Address" field.