Breadcrumb without trailing arrow and active page

Kirby 3 Solved ✅
1

How do I remove the trailing arrow from the last parent in the breadcrumb?

Rather than this:
Home > News > Article

I have removed active page:
Home > News >

But I can’t work out how to remove the trailing arrow from the last item in the loop.

<ol class="breadcrumbs">
	<?php foreach($site->breadcrumb() as $crumb): ?>
	<li>
	<?php if($crumb->is($site->breadcrumb()->last())): ?>
	<?php else: ?>
	<a href="<?php echo $crumb->url() ?>">
	<?php echo html($crumb->title()) ?>
	</a>
	<span class="trail" data-uw-styling-context="true">&gt;</span>
	<?php endif ?>
	</li>
	<?php endforeach ?>
</ol>

Any ideas?

Thanks

2

I would use CSS to add those arrows instead of putting this in the code.

3

You can and should solve this in CSS and leave HTML without additional logic or classes. Here’s a quick example how it would work:

ol {
  list-style: none;
}

li {
  display: inline-block;
  color: black;
}

.breadcrumbs a {
  color: currentColor;
}

li:not(:last-of-type)::after {
  content: '>';
  color: currentColor;
}
4

In addition to what has already been said above, conditions that should only ever do something in one case, should be inverted to prevent the if-else, so your code should look something this:

Additionally, only go into the loop if there is more than one item to prevent an empty ol element:

<?php $crumbs = $site->breadcrumb(); ?>
<?php if ($crumbs->count() > 1): ?>
  <ol class="breadcrumbs">
    <?php foreach ($crumbs as $crumb): ?>
      <li>
        <?php if (! $crumb->isLast()): ?>
          <a href="<?php echo $crumb->url() ?>"><?php echo html($crumb->title()) ?></a>
        <?php endif ?>
      </li>
    <?php endforeach ?>
  </ol>
<?php endif ?>
5

Thanks helloanselm… I did think that was how I should do it but thought must be possible as I was following an example. (I was overthinking it !)

1 Like
6

Thanks texnixe, I have tried your code but it isn’t quite working how I need. The Home link isn’t displayed?

Media Centre > News > News artle

I was also looking to not display the current page eg news article like so:

Home > Media Centre > News

But then for other pages I want to use another Breadcrumb showing the current page but without it being a link. Any ideas how I could do this?

In this example current page History would not be a link.

Home > About us > History

Texnixe I changed your code from “isLast” to “isActive” this then displays the Home link but not the current page?

7

Then remove the first if statemnt again.

8

Great thanks…
All working now. Using below code and some css for adding the arrows >

Tweaked so active page isn’t a link.

<div class="section bread">
<?php $crumbs = $site->breadcrumb(); ?>
<?php if ($crumbs->count() > 1): ?>
	<ol class="breadcrumbs">
		<?php foreach ($crumbs as $crumb): ?>
		 <?php if ($crumb->isActive()): ?>
	 	<li>
			 <?php echo html($crumb->title()) ?>
		 </li>
		 <?php else: ?>
		<li>
		   <a href="<?php echo $crumb->url() ?>"><?php echo html($crumb->title()) ?></a>
		</li>
		 <?php endif ?>
		<?php endforeach ?>
	</ol>
	<?php endif ?>
</div>

Thanks again for your help

1 Like