diff --git a/client/scss/components/_breadcrumbs.scss b/client/scss/components/_breadcrumbs.scss index cb5e9edee7..e417df3fa6 100644 --- a/client/scss/components/_breadcrumbs.scss +++ b/client/scss/components/_breadcrumbs.scss @@ -12,8 +12,15 @@ } } - .w-breadcrumbs__sublabel { + .w-breadcrumbs__sublabel, + .w-breadcrumbs__icon { display: inline-block; } + + .w-breadcrumbs__icon { + width: theme('spacing.5'); + height: theme('spacing.5'); + margin-inline-end: theme('spacing[2.5]'); + } } } diff --git a/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html b/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html index 3f48dac76c..45336d8743 100644 --- a/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html +++ b/wagtail/admin/templates/wagtailadmin/shared/breadcrumbs.html @@ -6,6 +6,7 @@ `items` - A list of {"url": Union[str, None], "label": str, "sublabel": Union[str, None]} dicts `classname` - Modifier classes `is_expanded` - Whether the breadcrumbs are always expanded or not, if True the breadcrumbs will not be collapsible + `icon_name` - The name of the icon to display before the final item when the breadcrumbs are collapsed {% endcomment %} {% with breadcrumb_link_classes='w-flex w-items-center w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside w-border-b w-border-b-2 w-border-transparent w-box-content hover:w-border-current hover:w-text-text-label' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0' icon_classes='w-w-4 w-h-4 w-ml-3' %} {# Breadcrumbs are visible on mobile by default but hidden on desktop #} @@ -48,6 +49,11 @@ data-w-breadcrumbs-target="content" {% endif %} > + {% fragment as icon %} + {% if icon_name and forloop.last %} + {% icon name=icon_name classname="w-breadcrumbs__icon w-hidden" %} + {% endif %} + {% endfragment %} {% fragment as sublabel %} {% if item.sublabel %} : @@ -58,11 +64,13 @@ {% endfragment %} {% if item.url is not None %} + {{ icon }} {{ item.label }} {{ sublabel }} {% else %}
+ {{ icon }} {{ item.label }} {{ sublabel }}
diff --git a/wagtail/admin/templatetags/wagtailadmin_tags.py b/wagtail/admin/templatetags/wagtailadmin_tags.py index 4b06f16013..5252565143 100644 --- a/wagtail/admin/templatetags/wagtailadmin_tags.py +++ b/wagtail/admin/templatetags/wagtailadmin_tags.py @@ -67,8 +67,13 @@ register.filter("naturaltime", naturaltime) @register.inclusion_tag("wagtailadmin/shared/breadcrumbs.html") -def breadcrumbs(items, is_expanded=False, classname=None): - return {"items": items, "is_expanded": is_expanded, "classname": classname} +def breadcrumbs(items, is_expanded=False, classname=None, icon_name=None): + return { + "items": items, + "is_expanded": is_expanded, + "classname": classname, + "icon_name": icon_name, + } @register.inclusion_tag("wagtailadmin/shared/page_breadcrumbs.html", takes_context=True)