Step engine: Create breadcrumb navigation

Last updated:
Edit on GitHub

This document shows how to step up breadcrumb navigation for a step collection.

To set up breadcrumb navigation for a step collection, follow these steps:

  1. Mark the steps want to have in your breadcrumb. To mark a step available for breadcrumb, implement \Spryker\Yves\StepEngine\Dependency\Step\StepWithBreadcrumbInterface in all the necessary steps.

The following example shows how to enable MyStep in the breadcrumb. The comments in each method describe their responsibilities.

Code sample 
<?php

use Spryker\Shared\Kernel\Transfer\AbstractTransfer;
use Spryker\Yves\StepEngine\Dependency\Step\AbstractBaseStep;
use Spryker\Yves\StepEngine\Dependency\Step\StepWithBreadcrumbInterface;

class MyStep extends AbstractBaseStep implements StepWithBreadcrumbInterface
{

    /**
     * @return string
     */
    public function getBreadcrumbItemTitle()
    {
        /*
         * Return any string that represents this step in the breadcrumb.
         */
        return 'Entry step';
    }

    /**
     * @param AbstractTransfer $dataTransfer
     *
     * @return bool
     */
    public function isBreadcrumbItemEnabled(AbstractTransfer $dataTransfer)
    {
        /*
         * Return true if this step is enabled (for example, clickable); false otherwise. It's
         * recommended to check the post condition to align with the status logic of
         * the step.
         */
        return $this->postCondition($dataTransfer);
    }

    /**
     * @param \Spryker\Shared\Kernel\Transfer\AbstractTransfer $dataTransfer
     *
     * @return bool
     */
    public function isBreadcrumbItemHidden(AbstractTransfer $dataTransfer)
    {
        /*
         * You can hide a step from the breadcrumb based on some conditions
         * by returning false in this method. It's recommended to check the require input
         * condition to align with the display logic of the step.
         */
        return !$this->requireInput($dataTransfer);
    }

    // also implement AbstractBaseStep methods...

}
  1. Once StepWithBreadcrumbInterface is implemented in all the necessary steps, generate the breadcrumb data.

You can instantiate \Spryker\Yves\StepEngine\Process\StepEngine together with optional \Spryker\Yves\StepEngine\Process\StepBreadcrumbGenerator. This provides the stepBreadcrumb variable with an instance of \Generated\Shared\Transfer\StepBreadcrumbsTransfer for all the templates handled by the step engine. The StepBreadcrumbsTransfer object stores all necessary data to display the breadcrumb in a template.

To generate StepBreadcrumbsTransfer, instantiate and use the \Spryker\Yves\StepEngine\Process\StepBreadcrumbGenerator class manually. This can be useful to provide a breadcrumb for pages that are not handled by the step engine itself.

The following example shows a template fragment of how to render the breadcrumb with the provided StepBreadcrumbsTransfer object.

<ul>
    {% for stepBreadcrumbItem in stepBreadcrumb.items %}
        <li class="{% if stepBreadcrumbItem.isActive %}active{% elseif not stepBreadcrumbItem.isEnabled %}disabled{% endif %}">
            {% if stepBreadcrumbItem.isEnabled and not stepBreadcrumbItem.isActive %}
                <a href="{{ url(stepBreadcrumbItem.route) }}">{{ stepBreadcrumbItem.title | trans }}</a>
            {% else %}
                {{ stepBreadcrumbItem.title | trans }}
            {% endif %}
        </li>
    {% endfor %}
</ul>