In website operation, clear navigation is a key element to improve user experience and help search engines understand the website structure.The Breadcrumb Navigation is a kind of intuitive auxiliary tool that can explicitly show the hierarchical path of the current page the user is on, allowing visitors to always know 'Where am I and where can I go next'.breadcrumbLabel.

ingeniously utilizebreadcrumbTags, build a clear navigation path

Anqi CMS'sbreadcrumbThe label is specifically used for dynamically generating the breadcrumb navigation path of the website.It requires no complex configuration and can automatically derive the complete access path based on the current page's category, model, or single-page structure.This is crucial for any content-rich website, whether it's an article detail page, a product list page, or a multi-level category page, users can easily backtrack to the parent page through breadcrumb navigation, greatly reducing the possibility of getting lost.

Use this tag very directly, you just need to insert a code snippet like this at the position where you need to display the breadcrumb navigation template.

{% breadcrumb crumbs with index="首页" title=true %}
    <ul class="breadcrumb">
        {% for item in crumbs %}
            <li{% if loop.last %} class="active"{% endif %}>
                {% if loop.last %}
                    {{ item.Name }}
                {% else %}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% endif %}
            </li>
            {% if not loop.last %}
                <li class="separator">/</li>
            {% endif %}
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code,breadcrumbThe tag will automatically collect and process the path information of the current page, and then pass it as an array object namedcrumbsto the template. You can useforLoop through thiscrumbsArray, take out each node one by one from the pathitem）。Each node containsName(link name) andLink（Link address）two keyword fields, convenient for you to build clickable navigation links.

Flexible customization to meet different display needs

breadcrumbThe label provides several practical parameters that allow you to adjust according to the specific design and content operation strategy of the website:

  1. indexParameter: Defines the navigation starting pointBy default, the first element of the breadcrumb navigation is usually "Home page". If you want to display this starting point as other text, such as "Website Homepage" or your brand name, you canindexParameters are set. For example,index="我的博客"the navigation path can start from “My Blog”.

  2. titleParameter: Controls the display of the current page title.In many cases, the last element of the breadcrumb navigation is the title of the current page.titleThe parameter allows you to finely control the display of this section:

    • When set totitle=trueWhen it is set to ，it will display the full title of the current page.
    • If set totitle=falseThe breadcrumb will not display the title of the current page, but use the last element of the parent category instead.
    • You can also specify a custom string fortitleto specify a custom string, for exampletitle="文章详情"So, no matter what the actual title of the current page is, the last element of the breadcrumb will display the custom text you set.

  3. siteIdParameters: data call under multi-siteEnglish CMS supports multi-site management,siteIdThe parameter is mainly used in a multi-site environment, if you need to specify the target site when calling breadcrumb data from other sites.But in most single-site or general use scenarios, this parameter usually does not require manual setting.

By combining these parameters, you can easily create breadcrumbs that are both user-friendly and aesthetically pleasing. For example, if you want the breadcrumbs to start with “My Blog” and not display the current article title, but end with “Read Article”, you can set it like this: 

{% breadcrumb crumbs with index="我的博客" title="阅读文章" %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                {% if loop.last %}
                    {{ item.Name }}
                {% else %}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
{% endbreadcrumb %}

Here we usedloop.lastTo determine if it is the last element, so as to decide whether to display plain text or text with links, this is very commonly used in beautifying breadcrumbs.

Why is breadcrumb navigation so important?

  • Improve User Experience (UX)：Users can navigate the website hierarchy quickly through breadcrumbs and easily return to any upper-level category, reducing unnecessary clicks and page jumps, significantly enhancing the ease of use of the website.
  • Optimize Search Engine Optimization (SEO)：Search engines prefer websites with clear structure and clear levels.Breadcrumbs navigation provides internal link structure, which helps search engines better crawl and index the website content, and also improves the display effect of the website in search results (it may be displayed as rich media abstract).
  • Reduce Bounce RateWhen users are lost, they usually choose to leave the website.Clear breadcrumb navigation can provide immediate directional awareness, making users more willing to explore other content on the website, thereby reducing the bounce rate.

Anqi CMS'sbreadcrumbTags with their concise syntax and powerful flexibility allow website administrators and content operators to easily integrate this important navigation element into the website, thereby laying a solid foundation for the success of the website.

Common Questions (FAQ)

1. Why did I add it in the template?breadcrumbWhat is the reason for adding tags, but the page does not display the breadcrumb navigation?

There may be several possible reasons:

  • The template location is incorrect:Make sure you have:breadcrumbThe label is placed in the visible area of the template, such as the header, above the content area, etc.
  • Content structure issue:Breadcrumbs navigation is automatically generated based on the content structure of the page (such as categories, models, single pages).If your article is not associated with a category, or if there is no clear hierarchy on a single page, the breadcrumb may not be able to generate the correct path.Please check your content settings on the Anqi CMS backend.
  • CSS hiding:Even though the possibility is small, it may also be that the page CSS style has accidentally hidden the breadcrumb navigation element.You can try checking the browser developer tools to see if the relevant HTML elements exist.

2. How to add styles to breadcrumb navigation to make it look more beautiful?

breadcrumbThe tag itself is only responsible for outputting the original navigation data (link name and link address), and the specific styles need to be implemented through CSS. In the above example code, we used<ul>and<li>Label to wrap navigation elements and addbreadcrumbandbreadcrumb-itemEnglish class name.You can write style rules for these class names in the CSS file of the website, such as setting font size, color, spacing, background color, and separator between list items, etc., to match the overall design style of your website.

3.breadcrumbDoes the label support all types of pages, such as articles, products, and single pages?

Yes, it is supported by Anqi CMSbreadcrumbThe label design initially considered multiple content types.It can intelligently identify the type of the current page (whether it is an article, a product, or an independent single page) and automatically build the correct breadcrumb navigation path according to the hierarchical relationship set in the Anqi CMS backend.breadcrumbThe label will work normally.