diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
index b0863fc480..7d284ba873 100644
--- a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
+++ b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
@@ -22,9 +22,9 @@
{% for item in _items %}
{% if loop.index is same as(_items|length - 1) and _goBackTitle is not same as('') %}
- {{ _goBackTitle }}
+ {{ _goBackTitle }}
{% endif %}
- {{ item.title }}
+ {{ item.title }}
{% endfor %}
{%- else -%}
diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig
index eb22be4086..4e3c3c1fbd 100644
--- a/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig
+++ b/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig
@@ -2,10 +2,10 @@
{%- set props = props | default([]) -%}
{%- set _children = block('content') -%}
{%- set _href = props.href -%}
+{%- set _iconNameEnd = props.iconNameEnd | default('chevron-right') -%}
+{%- set _iconNameStart = props.iconNameStart | default('chevron-left') -%}
{%- set _isCurrent = props.isCurrent | default(false) -%}
{%- set _isGoBackOnly = props.isGoBackOnly | default(false) -%}
-{%- set _iconNameStart = props.iconNameStart | default(null) -%}
-{%- set _iconNameEnd = props.iconNameEnd | default("chevron-right") -%}
{# Class names #}
{%- set _displayNoneClassName = _spiritClassPrefix ~ 'd-none' -%}
@@ -21,7 +21,7 @@
{% endif %}
- {% if _iconNameStart %}
+ {% if _isGoBackOnly and _iconNameStart %}
{% endif %}
{{ _children }}
- {% if _isCurrent is not same as(true) and _isGoBackOnly is not same as(true) %}
+ {% if _isCurrent is not same as(true) and _isGoBackOnly is not same as(true) and _iconNameEnd %}
{% endif %}
diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
index 91a2de7a2c..728b986c8c 100644
--- a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
+++ b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
@@ -101,6 +101,10 @@ content can be overridden by any custom block content.
| `goBackTitle` | `string` | — | ✕ | Title/translation for back link to previous page on mobile. It's essential to be set along with items. If items property is not passed, backlink is to be created within children property. [**Optional DEPRECATED**][Deprecated] Will be **required** in the next major version. |
| `items` | `array` | `[]` | ✕ | Navigation menu items |
+You can add `id`, `data-*` or `aria-*` attributes to further extend the component's
+descriptiveness and accessibility. Also, UNSAFE styling props are available,
+see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
+
## BreadcrumbsItem
Use the `BreadcrumbsItem` component for the ordered list as the component's children instead of passing the breadcrumb items array via props:
@@ -117,16 +121,15 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil
### API
-| Name | Type | Default | Required | Description |
-| ------------------ | --------------- | --------------- | -------- | ----------------------------------------------------- |
-| `children` | `string` | — | ✕ | Custom content to override items rendering from array |
-| `href` | `string` | — | ✔ | URL |
-| `isCurrent` | `boolean` | `false` | ✕ | Whether is the item the current page |
-| `isGoBackOnly` | `boolean` | `fasle` | ✕ | Whether should be displayed in go back mode |
-| `iconNameEnd` | `string` | `chevron-right` | ✕ | Icon component on the end of the item wrapper |
-| `iconNameStart` | `string` | - | ✕ | Icon component on the start of the item |
-| `UNSAFE_className` | `string` | — | ✕ | Wrapper custom class name |
-| `UNSAFE_style` | `CSSProperties` | — | ✕ | Wrapper custom style |
+| Name | Type | Default | Required | Description |
+| ------------------ | --------------- | --------------- | -------- | ------------------------------------------- |
+| `href` | `string` | — | ✔ | URL |
+| `iconNameEnd` | `string` | `chevron-right` | ✕ | Icon name at the end of the item |
+| `iconNameStart` | `string` | `chevron-left` | ✕ | Icon name at the start of the item |
+| `isCurrent` | `boolean` | `false` | ✕ | Whether is the item the current page |
+| `isGoBackOnly` | `boolean` | `fasle` | ✕ | Whether should be displayed in go back mode |
+| `UNSAFE_className` | `string` | — | ✕ | Wrapper custom class name |
+| `UNSAFE_style` | `CSSProperties` | — | ✕ | Wrapper custom style |
You can add `id`, `data-*` or `aria-*` attributes to further extend the component's
descriptiveness and accessibility. Also, UNSAFE styling props are available,
diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html
index 21b374ab90..3bd973af31 100644
--- a/packages/web-twig/src/Resources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html
@@ -6,36 +6,6 @@