Breadcrumb Navigation is a common and practical navigation method on websites, which can clearly show the current position of the user in the website hierarchy, just like breadcrumbs scattered in the forest guiding the way home.For users, breadcrumb navigation not only helps them quickly understand the hierarchical relationship of the current page within the entire website, but also facilitates their ability to backtrack to higher-level pages, greatly enhancing the user experience of the website.At the same time, a clear breadcrumb path is also helpful for search engines to better understand the structure of the website, which may bring better crawling and ranking effects for search engine optimization (SEO).

AnQi CMS is an efficient content management system that fully considers the importance of this feature, and is built-in with convenient breadcrumb navigation tags, allowing website operators to easily display and manage these navigation paths on content pages.

Add breadcrumb navigation on the content page

To display the breadcrumb navigation correctly on the content page of Anqi CMS, we first need to use the built-in features in the template file.breadcrumbLabel. Usually, to maintain the cleanliness and reusability of the template, we will place the breadcrumb navigation code snippet in a separate template file (such aspartial/breadcrumb.html), and then referenced byincludeTag it to include in the website's universal header file (such asbash.html) or in the specific content page template.

Here is an example of a basic breadcrumb navigation implementation:

First, in the directory of your templatepartialcreate a file named,breadcrumb.htmlfile (if it does not exist).

{# partial/breadcrumb.html #}
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb-list">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if forloop.Last %} {# 判断是否为最后一个面包屑项 #}
                        <span aria-current="page">{{item.Name}}</span>
                    {% else %}
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In this code block:

  • {% breadcrumb crumbs %}It is a core tag provided by AnQi CMS, which automatically generates an array containing path information based on the current page URL and the structure of the website, and assigns it tocrumbsVariable.
  • {% for item in crumbs %}Loop throughcrumbsEach path segment in the array.
  • item.NameRepresents the display name of the path segment (e.g., "Home", "Article Category", "Article Title").
  • item.LinkIndicates the URL address corresponding to the path segment.
  • forloop.LastIs an embedded loop variable used to determine whether the current loop item is the last one. Typically, the last breadcrumb item (i.e., the current page) should not be a link, but simply text and containaria-current="page"Accessibility properties to enhance.

Next, you can add it in your website's common template files (such as)bash.html) in, on<body>The appropriate location (usually at the top of the page content area, below the main navigation) to introduce this breadcrumb navigation snippet:

{# bash.html 或您希望显示面包屑导航的任何模板文件 #}
...
<body>
    {# 网站头部内容，如Logo、主导航等 #}
    {% include "partial/header.html" %}

    <main>
        {# 引入面包屑导航 #}
        {% include "partial/breadcrumb.html" %}

        {# 当前页面主要内容区域 #}
        {% block content %}{% endblock %}
    </main>

    {# 网站底部内容 #}
    {% include "partial/footer.html" %}
</body>
...

After completing these steps, when you visit any content page on the website, such as article detail pages, product detail pages, category list pages, or single pages, the system will automatically generate and display the corresponding breadcrumb navigation path based on the current page location.

Customize the display of the breadcrumb navigation.

Of Security CMSbreadcrumbThe tag also provides some parameters to allow for more fine-grained control over the display of breadcrumb navigation:

  1. Customize the home page name (index)By default, the first item of the breadcrumb navigation is 'Home'. If you want to display it as another name, such as 'My Blog' or 'Website Homepage', you can useindexSet the parameters.

    {% breadcrumb crumbs with index="我的博客" %}
    {# ... 循环显示 crumbs ... #}
{% endbreadcrumb %}

  2. Control document title display (title)In the document detail page (such as article, product page), the last item of the breadcrumb navigation is usually the title of the document. You can usetitleParameters to control its display mode:

    • title=true(Default): Display the full document title.
    • title=false: Do not display the document title, the breadcrumb path stops at the current category.
    • title="自定义标题": Display the custom string you specified as the last bread item.
    {# 在文章详情页，如果不想显示具体文章标题，只到分类层级 #}
{% breadcrumb crumbs with title=false %}
    {# ... 循环显示 crumbs ... #}
{% endbreadcrumb %}


{# 或者，将文章标题统一显示为“文章详情” #}
{% breadcrumb crumbs with title="文章详情" %}
    {# ... 循环显示 crumbs ... #}
{% endbreadcrumb %}

Use these parameters together. You can flexibly adjust the display effect of the breadcrumb navigation according to the design of the website and the needs of user experience.

Practical suggestions for breadcrumb navigation.

  • Semantic HTML:Use<nav>/<ol>/<li>and<a>Use semantic tags to build breadcrumb navigation, which helps improve website accessibility and SEO friendliness.
  • Clear styles:Although breadcrumb navigation is more functional than visual, it still needs to be styled appropriately with CSS to maintain consistency with the overall website style and make it easy for users to identify and click.Ensure that the link has enough click area, and the current page (the last item) can be clearly identified through the style.
  • Adapt for mobile:On mobile devices, breadcrumb navigation may appear lengthy due to space constraints.Consider using a responsive design, such as displaying only the most recent levels, or collapsing the breadcrumbs into a clickable 'back' button.
  • Hierarchical logic:Breadcrumbs should strictly follow the actual hierarchy of the website, do not skip levels or create logically inconsistent paths, as this will confuse users.

Provided by Anqi CMSbreadcrumbTags with flexible parameters, you can easily build user-friendly and SEO-optimized breadcrumb navigation for your website, enhancing the overall quality of the site.

Frequently Asked Questions (FAQ)

1. Why is my breadcrumb navigation not displaying?

If the breadcrumb navigation is not displaying, please check the following points first:

  • Did you correctly introduce it in the template?breadcrumb.html?Confirm that your main template file (such asbash.htmlor page detail template) is being used{% include "partial/breadcrumb.html" %}.
  • breadcrumb.htmlDoes the file exist in the correct path?Ensure that the file is indeed intemplateUnder the directorypartialin the folder.
  • Does the current page have a clear hierarchy structure?Breadcrumbs navigation is automatically generated based on the page classification, model, or parent-child relationship of a single page.If the current page is the website's homepage or does not have a clear category, the breadcrumb may only display 'Homepage' or be empty.Please check if the content classification settings are correct.
  • Is the website cache cleared?After modifying the template file, sometimes you need to clear the website cache to see the latest effect. You can find the "Update Cache" feature in the AnQi CMS backend to perform the operation.

How to exclude a certain level in the breadcrumb navigation, such as not displaying the intermediate level of 'Product Category'?

Of Security CMSbreadcrumbThe tag does not directly provide the functionality to exclude specific levels. However, you can do so by iterating in a loop{% for item in crumbs %}Add conditional judgment to implement custom filtering logic. For example, if you want to exclude the level named "Product Category", you can modify it as followsbreadcrumb.html:

<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb-list">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                {# 假设 item.Name 不会是空字符串 #}
                {% if item.Name != "产品分类" %}
                    <li class="breadcrumb-item">
                        {% if forloop.Last %}
                            <span aria-current="page">{{item.Name}}</span>
                        {% else %}
                            <a href="{{item.Link}}">{{item.Name}}</a>
                        {% endif %}
                    </li>
                {% endif %}
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

Please note that this method is based on the name of the breadcrumb item, and if the name may change or if there are multiple similar names, you need to adjust the judgment logic.

How to change the breadcrumb navigation style?

The visual style of the breadcrumb navigation is entirely dependent on your website's CSS file. The Anqi CMS providesbreadcrumbThe tag is responsible for outputting the HTML structure of the navigation path, and for color, font, size, spacing, and background, etc., you need to implement them by writing or modifying CSS code.

You can use similarbreadcrumb-nav/breadcrumb-list/breadcrumb-itemandbreadcrumb-item aCSS selectors to set styles specifically. For example:

`css