Breadcrumbs buld automatically

Need Help
#1

Hi,

Can I ask You to help me how to make a proper breadcrumbs? How can I get all parents pages for a certain page? So like that I could build breadcrumbs automatically?

Thank you,
Zs

#2

Question is what are you use for navigation? StaticPages menu have breadcrumbs native, if using Tailor structure use macro tag recursively.

#3

Yes, I would like to use for navigation.
I could not find in StaticPages documentation about the breadcrumbs.
Do you have documentation or example code?

Kind regards,
Zs

#4

if you have StaticPages installed, you have the breadcrumbs component available, just insert it into the page and it will generate a path according to your content in staticPages

#5

Hi there,

{{ this.param.slug }} may be useful there! This value used on http://localhost:8000/home/some/more/testing will return home/some/more/testing string.
Then you can use | split method split - Documentation - Twig - The flexible, fast, and secure PHP template engine
{% set breadcrumbs = this.param.slug | split(‘/’) %} will give you an array [‘home’,‘some’,‘more’,‘testing’]
In order to display the names

{% for breadcrumb in breadcrumbs %}
    <a href="">{{ breadcrumb }}</a>
{% endfor %}

I feel like I’m overcomplicating the actual href - feel free to simplify! The full example below:

{% set breadcrumbs = this.param.slug | split('/') %}
{% for breadcrumb in breadcrumbs %}
{% set continue = true %}
    <a href="/{% for bread in breadcrumbs %}{% if continue %}{{ bread }}/{% if bread == breadcrumb %}{% set continue = false %}{% endif %}{% endif %}{% endfor %}">{{ breadcrumb }}</a>
{% endfor %}

That’s how the resulting html looks like:
image

Hope that helps! Should work on any page no matter if it’s built using StaticPages, hard-coded, or using custom tailor page builder!

3 Likes