How to display breadcrumb navigation on a page to improve user experience?

In modern web design, breadcrumb navigation has become a standard element for enhancing user experience and website usability.It is like a guide that directs users forward, clearly showing the user's current position in the website's hierarchy structure and providing a convenient way to return to the upper-level page.For websites built with AnQiCMS, integrating breadcrumb navigation not only greatly facilitates visitors but also plays a positive role in search engine optimization (SEO).

Why is breadcrumb navigation so important?

Imagine that the user has browsed multiple pages on your website, delving into the details of a product or a subcategory of an article.If there is no breadcrumb navigation, they may quickly become lost, not knowing how to return to the previous category or the homepage of the website, which will greatly increase the user's bounce rate.Breadcrumb navigation provides a intuitive hierarchical path, helping users quickly locate, reduce cognitive burden, and conveniently navigate between different levels.

From an SEO perspective, breadcrumb navigation is also invaluable.It effectively conveys the hierarchical structure of the website by creating a series of internal links.This not only helps search engine spiders better crawl and understand your website content, but also passes page authority from the homepage or other high-authority pages to deep pages, thereby improving the overall SEO performance and keyword ranking of the website.

Breadcrumbs navigation label in AnQiCMS

AnQiCMS fully understands the importance of breadcrumb navigation, and has built-in powerful and easy-to-use template tags to help you achieve this function. This core tag is{% breadcrumb %}It can intelligently generate the corresponding navigation path based on the type of page the user is currently visiting, whether it is an article detail page, a category list page, or any other page.

Use{% breadcrumb %}The label is very direct. Usually, you would wrap it in aforIn a loop, because breadcrumb navigation is a list of links. AnQiCMS will generate the path as an array (here we call itcrumbsVariables are provided in the form, you can iterate over this array to build the HTML structure.

Basic usage is as follows:

{% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code block,crumbsis composed by{% breadcrumb %}A variable generated by the label, it contains information about each navigation node. Inside the loop,item.Linkit will provide the URL link of the node,item.NameThe text name displayed to the user. With this structure, you can easily build semantic HTML breadcrumb navigation.

Flexible configuration of breadcrumb navigation display

AnQiCMS'{% breadcrumb %}The tag also provides some parameters, allowing you to adjust the display of breadcrumb navigation according to your actual needs:

1. Customize the home page name (indexparameters)Breadcrumb navigation usually starts from the homepage of a website, which is displayed as "Home" by default. If you want to change it to another name, such as "My Homepage" or your brand name, you can useindexSet the parameters.

   {% breadcrumb crumbs with index="我的主页" %}
       <ul>
           {% for item in crumbs %}
               <li><a href="{{item.Link}}">{{item.Name}}</a></li>
           {% endfor %}
       </ul>
   {% endbreadcrumb %}
   

2. Control the display of the current page title(titleparameters)By default, AnQiCMS's breadcrumb navigation will automatically display the title of the current page at the end of the path. You cantitleParameters to control this behavior.

   • If you do not want to display the title of the current page, you can set it tofalse:title=false.
   • If you want to use a fixed text to replace the current page title, for example, to display 'Article Details' uniformly on the article detail page, you can directly pass in a string:title="文章详情".

3. Call of multi-site data(siteIdparameters)For websites that use the AnQiCMS multi-site management function, if you need to display the breadcrumb path of other sites on a site, you can do so bysiteIdThe parameter specifies the target site ID. However, in most cases, especially when building the current site page, it is usually unnecessary to manually set this parameter, AnQiCMS will automatically identify and generate the breadcrumbs for the current site.

**Practice: Modularize breadcrumbs code

To maintain the cleanliness and high reusability of template code, it is recommended that you encapsulate the breadcrumb navigation code snippet into an independent template file. AnQiCMS encourages storing such code snippets inpartial/In the directory. For example, you can create a file namedpartial/breadcrumb.htmland place the above breadcrumb code in it.

template/您的模板目录/partial/breadcrumb.htmlFile content example:

{# 假设这个文件名为 partial/breadcrumb.html #}
<nav class="breadcrumb-nav">
    <ul>
        {% breadcrumb crumbs with index="网站首页" title=true %}
            {% for item in crumbs %}
                <li>
                    <a href="{{item.Link}}">{{item.Name}}</a>
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ul>
</nav>

Then, on your website,base.htmlOr through other breadcrumb template filesincludeReference it like this:

{# 在您的主模板文件（例如 base.html）中引用 #}
<body>
    <header>...</header>
    
    <main>
        {% include "partial/breadcrumb.html" %} {# 在这里引用面包屑导航 #}
        
        <div class="content">
            <!-- 页面具体内容 -->
        </div>
    </main>
    
    <footer>...</footer>
</body>

This way, no matter which page needs breadcrumb navigation, it can be easily integrated with just one line of code, and all the breadcrumb styles and logic are centralized in one place for management, greatly improving development efficiency and maintenance convenience.

Summary

Breadcrumbs navigation is a small but beautiful feature, playing an important role in improving website usability, optimizing user experience, and enhancing SEO performance. With the built-in AnQiCMS{% breadcrumb %}Tags with flexible parameter configuration, you can easily integrate this feature into your website, providing your visitors with clear navigation guidance, and also laying a solid SEO foundation for the long-term development of the website.

Frequently Asked Questions (FAQ)

1. Is breadcrumb navigation applicable to all page types?Breadcrumb navigation is most suitable for pages with a clear hierarchical structure, such as article detail pages, product detail pages, category list pages, etc.For some flattened or functional pages, such as contact us, search results page, etc., their role may not be very significant, and sometimes they can be omitted for simplicity.AnQiCMS 's{% breadcrumb %}Labels will be intelligently generated based on the context of the current page, but you can also optionally exclude it in some page templates as needed.

2. How to change the breadcrumb navigation style?The style of breadcrumb navigation is usually controlled by CSS. Since we recommend outputting it as semantic<ul><li><a>structure, you can use for<nav>/<ul>or<li>Add a custom CSS class (such asbreadcrumb-nav), then write the corresponding CSS rules to beautify its appearance, including font, color, spacing, separator styles, etc.

3. How are the separators (such as “>“) generated in the breadcrumb navigation? Can they be customized?AnQiCMS'{% breadcrumb %}The tag itself is only responsible for providing the name and link of each navigation node, the style of the separator is usually implemented in the HTML and CSS you write. For example, you can<li>elements using CSS of::afterpseudo-elements to add separators, or informanually add separators in the loop (for example{{item.Name}} >), but this will increase the complexity. It is recommended to use CSS pseudo-elements for greater flexibility and easier maintenance.