How to modify breadcrumbs' separator character?

Yii 2.0 Tips, Snippets and Tutorials
1

I want to replace default breadcrumbs’ separator character of / with →.

I can clearly see that rendering of this character is not performed by Yii / PHP / backend (any PHP code in yii\widgets\Breadcrumbs class), but as a part of frontend magic / CSS code:

.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}

So this is controlled by the last line of a CSS style stored in /vendor/bower-asset/bootstrap/dist/css/bootstrap.css file (line 4733).

I am newbie-close-to-zero when it comes into CSS modification or CSS at all. So I have no idea, how should I approach this problem.

How to develop (from Yii framework perspective) this, i.e. what kind of code and where should I put in order to have content: var(--bs-breadcrumb-divider, "/") replaced with content: var(--bs-breadcrumb-divider, "→")?

Or what else should I do / code in order to achieve the above mentioned replacement?

2

Because it is using the ‘var’ function where value “/” is its fallback, you can easily customize it by simply setting ‘–bs-breadcrumb-divider’ variable. In simplest form it could be done this way:


<?= Breadcrumbs::widget([
    'links' => $this->params['breadcrumbs'],
    'options' => [
        'style' => '--bs-breadcrumb-divider: "&"', // < here
    ]
]) ?>
3 Likes
3

Works like a charm! Thank you.