How to build and display a multi-level navigation menu for a website?

Website navigation, like the skeleton and compass of a website, it guides visitors to explore the website content, and is the core of user experience and information architecture.A clear and easily accessible navigation menu that not only helps users quickly find the information they need, but is also crucial for search engine optimization (SEO).AnQiCMS (AnQiCMS) is well-versed in this, providing a powerful and flexible navigation management function, allowing you to easily build and display multi-level navigation menus.

Next, we will delve deeper into how to step by step build and display your website navigation in Anqi CMS.

1. Configure the navigation menu in the Anqi CMS backend.

First, build the starting point of the navigation menu in the AnQi CMS backend management interface. This is where you define the menu structure, link types, and levels.

1. Enter the navigation settings interfaceIn the left menu of Anqi CMS backend, you will find the 'Backend Settings' option. Click to expand and select 'Navigation Settings' to enter the core area of navigation management.

2. Manage navigation categoriesOn the "Navigation Settings" page, you will see a section named "Navigation Category Management".The system usually presets a "default navigation" category, which is usually used for your website's main menu.If you want to set up independent menus for different areas of the website (such as the footer, sidebar), you can click on 'Customize Navigation Categories' to add more navigation categories, such as 'Footer Navigation' or 'Product Navigation'.Assign a clear name to each category, which will help you with subsequent management and invocation.

3. Add and edit navigation linksAfter selecting or creating a navigation category, you can start adding specific navigation links. Click 'Add New Navigation Link' to open a configuration form that includes the following key options:

   • display nameThis is the text displayed on the front end for the navigation menu item, you can set it freely as needed.
   • Subheading name: Some design styles require a subtitle below the main title (such as Chinese-English对照), which can be set here.
   • Navigation description: Add a brief description for the navigation item, which can be used as a tooltip in some template designs.
   • Parent navigationThis is the key to implementing multi-level navigation. Anqi CMS natively supports two-level navigation.If you want to create a secondary menu item, just set its 'parent navigation' to an existing primary menu.Select "Top Navigation" means it is an independent first-level menu.
   • Link Type: AnQi CMS provides three flexible link types to meet different needs:
     • Built-in linkThis includes 'home link', various 'model home pages' (such as article model home page, product model home page), as well as the model home page you customize.Select this type of link, the system will automatically retrieve the corresponding URL.
     • Category page linkYou can directly select a category that has been created on the website (such as "Company News", "Product Series") or a single page (such as "About Us", "Contact Us") as a navigation link.This greatly simplifies the creation of internal page links.
     • External linkIf you need to link to a specific URL within the site or an external website, you can select this option and manually enter the complete URL address. This provides the greatest flexibility.
   • Display orderEach navigation link can be set to a display order, with smaller numbers appearing earlier. This allows you to precisely control the order of menu items.

After completing all information entries, click "OK" to save, and your navigation menu structure will be built in the background.You can repeat the above steps to create all the necessary first and second level navigation menu items.

Level two, display multi-level navigation menu in the front-end template

After the menu is configured on the back end, the next step is to present these structured navigation data on the front end of the website. This is mainly provided through the Anqi CMS.navListTemplate tags can be used to achieve this.

1. InvokenavListTagIn your website template files (such as)base.html/header.htmletc), usingnavListLabel to get the navigation data configured in your backend. You need to specify a variable name (such asnavs) to store the retrieved data.

   {% navList navs with typeId=1 %}
       {# 导航菜单的HTML结构将在这里呈现 #}
   {% endnavList %}
   

   HeretypeId=1Indicates that you want to call the "default navigation" category (usually the first navigation category created). If you have created other navigation categories in the background, please base them on their actualtypeIdMake a call.

2. Traverse and render the first-level navigation navsThe variable is an array object that contains all the first-level navigation menu items you have configured. You can useforLoop to iterate over these menu items and build the corresponding HTML structure.

   <ul class="main-nav">
       {% for item in navs %}
       <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
           <a href="{{ item.Link }}">{{ item.Title }}</a>
           {# 这里是二级导航的占位符 #}
       </li>
       {% endfor %}
   </ul>
   

   In the loop,item.LinkWill output navigation links,item.Titlethen display the navigation name.item.IsCurrentIt is a very useful boolean value, which is set when the current page matches the link of the navigation itemtrueYou can use it to add a class to the current active menu itemactiveto achieve highlighting effect.

3. Render second-level navigation (multi-level menu)If a first-level navigation item is configured with a second-level navigation in the background, thenitemThe object will contain a namedNavListsub-array. You can checkitem.NavListDoes it exist, if it exists, then continue to nest oneforloop to render secondary menu items.

   <ul class="main-nav">
       {% for item in navs %}
       <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
           <a href="{{ item.Link }}">{{ item.Title }}</a>
           {% if item.NavList %} {# 检查是否存在二级导航 #}
           <ul class="sub-nav">
               {% for subItem in item.NavList %}
               <li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
                   <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
               </li>
               {% endfor %}
           </ul>
           {% endif %}
       </li>
       {% endfor %}
   </ul>
   

   In this way, you can easily build and display a multi-level navigation menu.Please note that the above code is just a basic HTML structure example. You can add CSS styles and JavaScript interactions to it according to your website design to achieve a more beautiful and dynamic menu effect.

4. Embed dynamic content in navigation (advanced application)The strength of AnQi CMS lies in the high combination of template tags. If your needs are not just simple two-level links, for example, if you want to display the latest articles under a specific category in a dropdown menu of a certain navigation item, or a list of all categories of a certain model, you canitem.NavListThe rendering logic, combined with other tags such asarchiveListorcategoryList）to achieve this.

   For example, if you have a 'Product Center' navigation item and you want its dropdown menu to not only show product categories but also highlight popular products under each category, you can do this:

   {# 假设外层已经有一个for item in navs循环，item是产品中心这个导航项 #}
   {% if item.NavList %}
   <ul class="sub-nav">
       {% for subItem in item.NavList %}
       <li class="sub-nav-item">
           <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
           {% if subItem.PageId > 0 %} {# 如果这个二级导航链接的是某个分类 #}
           <ul class="product-list-in-nav">
               {# 调用该分类下的最新产品 #}
               {% archiveList products with type="list" categoryId=subItem.PageId limit="5" %}
               {% for product in products %}
               <li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
               {% endfor %}
               {% endarchiveList %}
           </ul>
           {% endif %}
       </li>
       {% endfor %}
   </ul>
   {% endif %}
   

   Here utilizedsubItem.PageId(If the secondary navigation link is to a category, this ID is the category ID), and combined witharchiveListTags, thus dynamically displaying the relevant product list in the navigation menu.

3. **Practice and Tips

• Plan first: It is best to set up navigation in the background first, on paper