How to create and manage a website navigation menu and implement the display of secondary navigation?

The website's navigation menu, which is like the skeleton and landmark of the website, guides visitors to quickly find the information they need, and is the core of user experience and website information architecture.A clear and intuitive navigation system not only enhances user satisfaction, but is also crucial for search engine optimization (SEO).AnQiCMS (AnQiCMS) took this into consideration from the beginning of its design, providing a flexible and easy-to-operate navigation menu management function, allowing website operators to easily build and maintain the website's navigation system.

Building the main navigation of a website: from zero to one practice

To create and manage website navigation in Anqi CMS, we first need to enter the system's backend management interface.Find and click on the "Background Settings" in the menu on the left, then select "Navigation Settings" next.This is where we control the website menu.

AnQi CMS has categorized the navigation menu, by default there will be a 'Default Navigation' category, which is usually the main navigation of our website.If you have special requirements, such as placing a set of independent navigation menus in the footer or sidebar, you can add categories through the "Navigation Category Management", such as creating "Footer Navigation" or "Sidebar Navigation", which greatly increases the flexibility of navigation layout.

Next, we can start adding navigation links. Click the "Navigation Link Settings" and you will see a form to add or edit navigation items.

• display nameThis is the text directly displayed on the navigation menu for visitors, such as 'Home', 'Product Center', 'About Us'. You can name it freely according to your actual needs.
• Subheading nameIf you want to display bilingual titles in navigation, or add some additional brief descriptions to the title, this field can come in handy.
• Navigation descriptionHere you can provide a more detailed description for the navigation items, although it is usually not displayed directly in the navigation bar, but it may appear as a mouse hover tip in some thematic designs.
• Link TypeThis is the core definition of where the navigation points. Anqi CMS provides three flexible link types:
  • Built-in linkIncluding 'home link', various 'content model home pages' (such as article model home page, product model home page, etc.), these are the commonly used entry points preset by the system.
  • Category page link: You can select existing article categories, product categories, or single pages as navigation targets. This means that your content structure can be directly mapped to the navigation.
  • External linkIf you want to link to a specific page within the site or an external website, you can use this option. Just enter the complete URL address.
• Display orderThis field is used to control the order of navigation items. Typically, the smaller the number, the closer the navigation item is to the front of the menu. You can adjust these numbers to easily reorder.

By following these steps, we can add the first-level navigation menu items of the website one by one.

Achieve a clever display of the second-level navigation.

The Anqi CMS supports the creation and display of secondary navigation menus natively, which is crucial for building a clear hierarchical website structure.The key to implementing secondary navigation is to make use of the 'parent navigation' field.

When adding a new navigation link, if you want it to be a submenu under a first-level navigation, just select the corresponding first-level navigation in the "Parent Navigation" field.For example, if you have a top-level navigation named "Product Center" and you want to add submenus such as "Product A", "Product B", etc. under it, then when creating the navigation links for "Product A" and "Product B", set their "parent navigation" to "Product Center".The AnQi CMS automatically recognizes this level relationship.

The settings on the back-end are merely to define the logical structure of navigation. To actually display the secondary navigation effect on the website front-end page, support at the template level is also needed. The template engine of Anqi CMS provides powerfulnavListTags that make front-end calls very convenient.

In your template file (usually)header.htmlor the part that includes the main navigation), you can usenavListtags to get the navigation list:

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断是否有二级导航 #}
            <dl> {# 或者使用ul/ol，根据你的HTML结构来 #}
                {%- for inner in item.NavList %} {# 循环二级导航 #}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

In this code block:

1. {% navList navs %}Retrieved all navigation menus configured on the backend and assigned them tonavsVariable.
2. The firstforLoop throughnavsto render the first-level navigation items.item.Titleanditem.LinkUsed to display titles and links.item.IsCurrentIt can be used to determine if the current page is the navigation item so that styles can be added.
3. {%- if item.NavList %}It is the key to achieving secondary navigation.item.NavListIs a boolean value, if the current level navigation item contains sub-navigation, it will betrue.
4. Ifitem.NavListWithtrueThen the second insideforThe loop will iterate over all the sub-navigation items of the current level navigation item (item.NavListRender the content of the second-level menu.

By this nested structure, your website navigation can clearly display the first and second-level menus, thereby providing a richer and more friendly user browsing experience.In addition, you can also embed content categories under the secondary navigation according to your needs, or deeper classifications, making full use of the flexibility of the Anqi CMS content model.

Maintenance and optimization of the navigation menu.

Creating a navigation menu is not a one-time task, as the website content increases and the business develops, the navigation menu also needs continuous maintenance and optimization.In Anqi CMS, you can always return to the "Navigation Settings" page to edit, delete, or adjust the order of existing navigation items.For example, by modifying the 'Display Order', you can quickly adjust the position of menu items without touching any code.

When designing navigation, it is also important to consider search engine optimization.Use meaningful keywords as navigation names, ensure link accessibility, and avoid deep navigation levels (original two levels are already very friendly), all of which help to improve the website's SEO performance.The static and SEO tools built into AnQi CMS also provide a solid foundation for optimizing navigation links.

In summary, AnQi CMS provides an intuitive and powerful navigation menu management system. Whether it's a simple single-layer menu or a complex two-level navigation, it can be easily configured in the background and presented perfectly on the front end through flexible template tags.This makes the website's structure planning and content presentation efficient and creative.

Frequently Asked Questions (FAQ)

1. Does Anqi CMS support creating third-level or higher-level navigation menus?The AnQi CMS natively supports the creation and management of two-level navigation menus in the background settings. Although it does not directly provide an entry for background configuration of three levels or more, you can combine the category management feature and custom template tags (such as calling again under the second-level navigation).categoryListTo display its sub-categories, realize a more complex navigation structure, but this requires certain template development capabilities.

2. How to adjust the display order of the navigation menu?On the Anqi CMS backend's 'Navigation Settings' page, each navigation link has a 'Display Order' field.By adjusting the size of the number in this field, you can control the arrangement order of the navigation menu items.As a rule, the smaller the number, the earlier the navigation item will be displayed in the menu.

3. Can I set a menu different from the main navigation in the footer or sidebar?It is completely possible. Anqi CMS provides the 'Navigation Category Management' feature.In addition to the default main navigation category, you can create new navigation categories as needed, such as "Footer navigation", "Sidebar navigation", and so on.Then, add and manage links for these different navigation categories and specify in the templatetypeIdThe parameter'snavListLabels to call them.