In website operation, a clear and intuitive navigation menu is a key factor in enhancing user experience and guiding content browsing.Many users hope to implement dropdown menus in the main navigation when building websites, so that related categories or product documents can be displayed hierarchically, making it convenient for visitors to quickly find the information they need.Then, can AnQiCMS meet our needs in this aspect?

The answer is affirmative, AnQiCMS natively supports displaying second-level categories (and even more related content at the template level) or product documents in the navigation menu, making the website structure clearer and content organization more orderly.

AnQiCMS English Menu Hierarchy

AnQiCMS was designed with flexibility in website structure in mind from the beginning.In the navigation management function, it allows us to create navigation links with hierarchical relationships.This means, you can set a primary navigation and then add one or more secondary navigations below it to form a dropdown menu effect.According to the official documentation, the navigation list can support up to two levels of links, that is, one level one navigation with one drop-down level two navigation.

Backend Management: Build a Clear Hierarchy Navigation Structure

In AnQiCMS backend, managing navigation menus is a straightforward and convenient process. You will find a dedicated "Navigation Settings" area where you can:

  1. Manage navigation category:In addition to the default main navigation, you can create different navigation categories according to the website layout needs, such as "footer navigation", "sidebar navigation", etc., each category can be independently managed for its links.
  2. Set navigation link:When adding or editing navigation links, there is a core option called "Parent Navigation".By selecting different parent navigation, you can easily establish the hierarchical relationship of navigation.For example, set "Product Center
  3. Select the link type:AnQiCMS provides various link types, which greatly enhances the flexibility of navigation. You can set the navigation link to:
    • Built-in Links:Like the home page of the website, the home page of specific models (articles, products).
    • Category page link:This is the key to implementing dropdown categories. You can choose any category created to be a navigation item.
    • External links:Link to other pages within the site or external websites.

Through these configurations, even users who are new to AnQiCMS can quickly understand and build a second-level navigation structure that meets their needs.

Front-end Display: Flexible and diverse content presentation

AnQiCMS provides powerful functions in the implementation of front-end templatesnavListThe label, which can retrieve all the navigation data you configure in the background. With the loop and judgment logic of the template engine, we can display these hierarchical navigation contents very flexibly.

  1. Secondary category dropdown display：When a secondary category link is configured under the primary navigation, you cannavListLabel gets this data. When traversing the first-level navigation items in the template, if it finds that it containsNavList（i.e., there is a sub-navigation available），and a dropdown menu will be rendered, displaying all the second-level categories.Visitors can see all related subcategories by simply hovering the mouse over the first-level navigation.

  2. Display the product documentation directly under the category:The strength of AnQiCMS lies in the fact that it is not limited to displaying categories alone. You can go further in the template, when a secondary navigation item is a specific category, by usingarchiveListLabel, list some product documents or articles under this second-level category directly in the dropdown area of the category.This is especially practical for product display websites, where users can preview some products without having to click into the category page, significantly shortening the user path and enhancing the discoverability of content.

For example, if your website has a first-level navigation of "SolutionsIn the drop-down menu of 'Product Solutions', you can not only display its subcategories but also directly list the latest several products, or point to links to related product documents.

AnQiCMS Through the close integration of this backend configuration with the frontend template tags, it provides users with a navigation solution that is both easy to manage and powerful, making the website's hierarchical structure and content organization more efficient and beautiful.

Common Questions and Answers (FAQ)

1. Does AnQiCMS support dropdown levels more than two in the navigation menu?AnQiCMS in the background management interface supports the configuration of navigation links up to two levels natively (one level one navigation with one level two dropdown menu).If your website has more complex navigation needs, requiring the implementation of three-level or more nested dropdown menus, this usually needs to be achieved through custom development of the frontend template.categoryListThe label is retrieved and rendered in the template, but the third-level 'Parent Navigation' configuration option will not be directly provided in the backend management.

2. Besides category and product documentation, can the dropdown items in the navigation menu link to other types of content?Of course you can. AnQiCMS navigation link types are very flexible, you can choose to link dropdown menu items to any page of the website, including:

  • Single page:For example, static content pages such as “About Us” and “Contact Information”.
  • External links:Link to other websites or specific marketing landing pages.
  • Other custom model pages:If you create a custom content model other than articles and products, you can also use its homepage or specific list page as a navigation link.

3. How to control the style and interaction effects of the dropdown menu?AnQiCMS focuses on content management and data output, the style and interaction of the navigation menu (such as mouse hover display, click to expand, etc.) are mainly controlled by the front-end template (HTML, CSS, and JavaScript). When you get tonavListThe navigation data output by the label can be used in the template according to your design requirements. You can use HTML structure to build the menu skeleton, then define its appearance through CSS, and finally implement various dynamic interactive effects through JavaScript, such as smooth transitions, responsive layouts, etc.