In website operation, a clear and intuitive navigation menu is a key element to enhance user experience and guide content browsing.Many users want to implement a dropdown menu in the main navigation when building a website, to hierarchically display related categories or product documents, making it convenient for visitors to quickly find the information they need.Then, can AnQiCMS meet our needs in this aspect?

The answer is yes, AnQiCMS natively supports displaying secondary dropdown categories or product documents in the navigation menu (even more related content can be presented at the template level), making the website structure clearer and content organization more orderly.

AnQiCMS navigation menu's hierarchical capability

AnQiCMS took into account the needs of enterprises and content operators for website structure flexibility from the beginning of its design.In the navigation management feature, 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-level links, which is a first-level navigation with a dropdown second-level navigation.

Backend management: build a clear hierarchical navigation structure

In AnQiCMS backend, managing the navigation menu is an intuitive and convenient process. You will find a dedicated "navigation settings" area, where you can:

  1. Manage navigation categories: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 independently manage the links under it.
  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' as a primary navigation, and then set specific 'Product Category A', 'Product Category B' as the sub-navigation of 'Product Center'. They will appear as dropdown menu items under 'Product Center' on the front end.
  3. Select the link type:AnQiCMS offers a variety of link types, which greatly enhances the flexibility of navigation. You can direct the navigation link to:
    • Built-in links:As the homepage of a website, or the homepage of a specific model (article, product).
    • Category page links:This is the key to implementing the dropdown category. You can choose any category created as a navigation item.
    • External links:Link to other pages within the site or external websites.

Through these configurations, even users who are first-time contacts with AnQiCMS can quickly understand and build a secondary navigation structure that meets their needs.

The front-end display: flexible and diverse content presentation

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

  1. The dropdown display of the secondary category:When the secondary category link is configured under the primary navigation, you can go throughnavListTag fetches these data. While traversing the first-level navigation items in the template, if it finds that it containsNavList(That is, if there is a sub-navigation), it can render a dropdown menu to display all second-level categories.Visitors only need to hover over the first-level navigation to see all related subcategories.

  2. Display the product documents 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, directly list some product documents or articles under this secondary category in the drop-down area.This is especially useful for product display websites, where users can preview some products without clicking into the category page, greatly shortening the user path and enhancing the discoverability of content.

For example, if your website has a primary navigation of "Solutions", under which there are two secondary categories: "Industry Solutions" and "Product Solutions".In the drop-down menu of "Product Solutions", you can not only display its subcategories, but also list the latest several products directly, or link to related product documentation.

AnQiCMS tightly integrates backend configuration with front-end template tags, providing users with an easy-to-manage and powerful navigation solution, making the website's hierarchical structure and content organization more efficient and beautiful.

Frequently Asked Questions (FAQ)

1. Does AnQiCMS navigation menu support dropdown levels beyond two levels?AnQiCMS supports natively configuring navigation links up to two levels in the background management interface (one level one navigation with a second level dropdown menu).If your website has more complex navigation needs, you need to implement drop-down menus with three or more levels, which usually requires custom development of the front-end template.You can pass the third-level category data under the second-level category bycategoryListThe label is retrieved and rendered in the template, but no third-level "parent navigation" configuration option is provided directly in the background management.

2. 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 on the website, including:

  • Single page:For example, static content pages such as "About Us" and "Contact Information."
  • External links:Points 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.

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 expand, etc.) are mainly controlled by the front-end template (HTML, CSS, and JavaScript). When you get tonavListAfter labeling the navigation data, you can use HTML structure to build the menu skeleton according to your design requirements, and then define its appearance through CSS, and implement various dynamic interactive effects through JavaScript, such as smooth transitions, responsive layouts, etc.