breadcrumbs

[froot]

How to generate breacrumbs?

I have this in my template 

if(page()->parent->id > $home->id) echo ukBreadcrumb(page(), [ 'class' => 'uk-visible@m breadcrumbs']);

which is default with the profile.

I want to add the current page and it looks like I need to re-build it from scratch to do so.

However, the documentation is quite poor regarding breadcrumbs.

no clue what is meant by…

$processPageList->setupBreadcrumbs();
$processPageEdit->setupBreadcrumbs();
$processPageAdd->setupBreadcrumbs();
…

there's no explanation and no examples but it's pretty much all I could find on this topic

Thanks for help!

 

 

[Zeka]

@fruid I'm using this function for 

 

/**
 * Render breadcrumb navigation
 *
 */
function renderBreadcrumbs(PageArray $items, Array $options = [])
{
	
	$page  = wire('page');
	if (!count($items)) return '';
	$index = 1;

	$defaults = array(
		'class'          => 'breadcrumbs__list', // class for the <ul>
		'a_class'        => 'breadcrumbs__link', // class for a item
		'a_active_class' => 'breadcrumbs__link--active', // class for a active item
		'liclass'        => 'breadcrumbs__item', // class for li item
		'active'         => 'breadcrumbs__item--active', // class for active item
	);

	$options = array_merge($defaults);
	$out     = "<ul class='$options[class]' itemscope itemtype='http://schema.org/BreadcrumbList'>";

	foreach ($items as $item) {

		$class   = $item->id == $page->id ? " class='$options[liclass]" . ' ' . "$options[active]'" : " class='$options[liclass]'";
		$a_class = $item->id == $page->id ? " class='$options[a_class]" . ' ' . "$options[a_active_class]'" : " class='$options[a_class]'";
		$title   = $item("bradcrumbs_title|title");

		$url = $item->url;
		$out .= "<li $class itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'><a $a_class href='$url' itemprop='item'><span itemprop='name'>$title</span><meta itemprop='position' content='$index' /></a>";
		$out .= "</li>";
		$index++;
	}

	$out .= "</ul>";
	return $out;
}

Then in template file 

$breadcrumbs = renderBreadcrumbs(page('parents')->not('template=categories|products')->add(page()));

 

[BillH]

For a basic approach:

$breadcrumbs = $page->title;
foreach($page->parents() as $parent) {
    $breadcrumbs = "<a href='{$parent->url}'>{$parent->title}</a> / " . $breadcrumbs;
}

 

[Chris Bennett]

I use this approach for breadcrumbs with built in structured data to help Google etc know what is going on.
Could definitely generate separate json to do the same but I kinda like doing it once and not worrying.

It's nothing fancy, just building on the default sample function.

Mainly adds extra schema stuff and the current page, in an <ol> for semantics and accessibility.
Rather than a function, I often just plonk it in my default where I want the breadcrumbs, surrounded by an if to see if I want to display them or not.

<nav class="breadcrumbs" aria-labelledby="breadcrumblist">
<h2 id="breadcrumblist" class="visually-hidden">Breadcrumbs</h2>
<ol itemscope itemtype="http://schema.org/BreadcrumbList">

<?php
// Display breadcrumbs in a Google-friendly aria-compliant microdata format 
    $count = 0;	// count link depth 
    foreach($page->parents() as $item) {
        $count++;
// output parent pages, links and schema breadcrumb info 
        echo'<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="' . $item->url . '"><span itemprop="name">' . $item->title . '</span></a>
<meta itemprop="position" content="' . $count . '"></li>'; 
    }
// output the current page as the last item
    $count = $count+1;
echo'<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<link itemprop="item" href="' . $page->url . '">
<span itemprop="name" aria-current="page">' . $page->title . '</span>
<meta itemprop="position" content="' . $count . '"></li>';
?>
</ol>
</nav>

After that, touch of CSS and you're ready to go.
Correct breadcrumb data and order reported with Structured Data Testing Tool and Rich Results Test.
 

[aagd]

2 hours ago, Freture said:

How to implement this ?

There are site profiles with breadcrumbs like the site-languages profile. There you can see how it's implemented in the _main.php (if you have one). Have a look at:

https://github.com/processwire/site-languages/blob/main/templates/_main.php#L109-L117