Breadcrumb without trailing arrow and active page

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

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

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;
}

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

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

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?

Then remove the first if statemnt again.

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