Jump to content



Recommended Posts

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…


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

Thanks for help!



  • Like 1
Link to comment
Share on other sites

@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>";

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

Then in template file 

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


  • Like 4
Link to comment
Share on other sites

For a basic approach:

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


  • Like 3
Link to comment
Share on other sites

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">

// Display breadcrumbs in a Google-friendly aria-compliant microdata format 
    $count = 0;	// count link depth 
    foreach($page->parents() as $item) {
// 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>';

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...