The website navigation, like the skeleton and compass of a website, guides visitors to explore the website content and is the core of user experience and information architecture.A well-structured, easy-to-access 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 proficient in this field, providing powerful and flexible navigation management functions, allowing you to easily build and display multi-level navigation menus.

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

1. Configure the navigation menu in the Anqi CMS backend

Firstly, the starting point of building the navigation menu is located in the background management interface of the Anqi CMS. This is where you define the menu structure, link type, and hierarchy.

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

  2. Manage navigation categoriesIn the 'Navigation Settings' page, you will see a section named 'Navigation Category Management'.The system usually presets a "default navigation" category, which is typically used for your website's main menu.但如果您希望为网站的不同区域（例如页脚、侧边栏）设置独立的菜单，您可以点击“自定义导航类别”来新增更多导航类别，比如“页脚导航”或“产品导航”。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. Clicking 'Add New Navigation Link' will open a configuration form that includes the following key options:

    • Display NameThis is the text displayed for navigation menu items on the front end, and you can freely set it as needed.
    • Subtitle name：Some design styles require a subtitle to be displayed below the main title (such as Chinese-English translation), which can be set here.
    • Navigation descriptionAdd a brief description for navigation items, which can serve as a tooltip when hovering over certain template designs in English.
    • Parent NavigationThis is the key to implementing multi-level navigation.The original support of AnQi CMS for two-level navigation.If you want to create a second-level menu item, just set its 'Parent Navigation' to an existing top-level menu.Select 'Top Navigation' means this is an independent first-level menu.
    • Link Type：The Safe 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 link, the system will automatically retrieve the corresponding URL.
      • Category page link：You can directly select a category created on the website (for example, "Company News", "Product Series") or a single page (such as "About Us", "Contact Us") as a navigation link.This method 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 then 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 arrangement of menu items.

Fill in all the information and click "Save" to confirm, and your navigation menu structure will be built in the background.You can repeat the above steps to create all the required first and second-level navigation menu items.

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

The menu is configured on the back-end, and the next step is to present these structured navigation data on the website's front-end page. This is mainly achieved through the security CMS provided bynavListtemplate tags.

  1. InvokenavListtagsin your website template files (for example)base.html/header.htmletc.), usenavListLabel to get the navigation data you configured in the background. You need to specify a variable name (such asnavs) to store the data you get.

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

    Here are thetypeId=1Represents your intention to call the "Default Navigation" category (usually the first navigation category created). If you have created other navigation categories in the background, please refer to them according to their actualtypeIdPerform the call.

  2. Traverse and render the first-level navigation navsA variable is an array object that contains all the first-level navigation menu items you have configured. You can useforLoop through 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.LinkIt will output navigation links,item.Titlethen display the navigation name.item.IsCurrentis a very useful boolean value, it is set when the current page matches the link of the navigation itemtrue, you can use it to add a class name to the current active menu itemactiveto achieve highlighting effect.

  3. Render secondary navigation (multi-level menu)If a first-level navigation item is configured with a secondary navigation in the background,itemthe object will include 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>

    By this means, 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 flexibility of its template tags. If your needs are not just simple two-level links, for example, you want to display the latest articles under a specific category in a dropdown menu of a certain navigation item, or the list of all categories of a certain model, you can initem.NavListof the rendering logic, combined with other tags (such asarchiveListorcategoryList) to implement.

    For example, if you have a 'Product Center' navigation item and you want its dropdown menu to show not only product categories but also popular products under each category, you can do it like 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 a category, this ID is the ID of that category), and combinedarchiveListLabels, thus dynamically displaying the related product list in the navigation menu.

Three, **Practice and Tips

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