diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig index 3e6b183b99..cd9f3c4244 100644 --- a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig @@ -10,4 +10,8 @@ {% include '@components/Breadcrumbs/stories/BreadcrumbsCustom.twig' %} + + {% include '@components/Breadcrumbs/stories/BreadcrumbsCurrentWithoutLink.twig' %} + + {% endblock %} diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig index 7d284ba873..f6ced60516 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 4d1c6851b2..4c052ca44a 100644 --- a/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/BreadcrumbsItem.twig @@ -1,7 +1,7 @@ {# API #} {%- set props = props | default([]) -%} {%- set _children = block('content') -%} -{%- set _href = props.href -%} +{%- set _href = props.href | default(null) -%} {%- set _iconNameEnd = props.iconNameEnd | default('chevron-right') -%} {%- set _iconNameStart = props.iconNameStart | default('chevron-left') -%} {%- set _isCurrent = props.isCurrent | default(false) -%} @@ -24,14 +24,18 @@ {% if _isGoBackOnly and _iconNameStart %} {% endif %} - + {% if not _href and _isCurrent %} {{ _children }} - + {% else %} + + {{ _children }} + + {% endif %} {% 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 e4e01e5d0f..3de7e85da1 100644 --- a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md @@ -121,15 +121,17 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil ### API -| 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` | `false` | ✕ | Whether should be displayed in go back mode | -| `UNSAFE_className` | `string` | — | ✕ | Wrapper custom class name | -| `UNSAFE_style` | `CSSProperties` | — | ✕ | Wrapper custom style | +| Name | Type | Default | Required | Description | +| ------------------ | --------------- | --------------- | -------- | ----------------------------------------------------- | +| `href` | `string` | — | ✕ \* | URL, if not set, the item is rendered as a plain text | +| `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` | `false` | ✕ | Whether should be displayed in go back mode | +| `UNSAFE_className` | `string` | — | ✕ | Wrapper custom class name | +| `UNSAFE_style` | `CSSProperties` | — | ✕ | Wrapper custom style | + +(\*) Optional only for the current page. 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/stories/BreadcrumbsCurrentWithoutLink.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsCurrentWithoutLink.twig new file mode 100644 index 0000000000..1f537585ab --- /dev/null +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/stories/BreadcrumbsCurrentWithoutLink.twig @@ -0,0 +1,19 @@ +{% set items = [ + { + title: 'Root', + url: '#rootUrl', + }, + { + title: 'Category', + url: '#categoryUrl', + }, + { + title: 'Subcategory', + url: '#subcategoryUrl', + }, + { + title: 'Current page', + }, +] %} + +