Configuring the Sylius Breadcrumb element

In the Sylius Admin interface, a breadcrumb element is present in the content part of various pages. This element is rendered using the @SyliusBootstrapAdminUi/shared/crud/update/content/header/breadcrumbs.html.twig Twig template.

Depending on your resource configuration, the breadcrumb element's output might not be ideal, displaying the entity's ID instead of a more user-friendly identifier like the title of the entity.

Fortunately, Sylius provides a straightforward way to configure which field to display, enhancing the user experience. To customize the breadcrumb for your resource, you need to create a new configuration.

For a Talk resource, you would use the sylius_admin.talk.update.content.header Twig Hook to configure the breadcrumbs hookable element. In the configuration for the hookable, you can specify the rendered_field to display a particular property of your entity. For example, to display the title property use the following configuration:

'sylius_admin.talk.update.content.header':
  breadcrumbs:
    template: '@SyliusBootstrapAdminUi/shared/crud/update/content/header/breadcrumbs.html.twig'
    configuration:
      rendered_field: title
    priority: 0

This configuration results in a more intuitive breadcrumb display, showing the title of the entity instead of its ID:

If you want to render static text before the resource name, you can use the rendered_field_prefix configuration. Here's how you can do it:

'sylius_admin.talk.update.content.header':
  breadcrumbs:
    template: '@SyliusBootstrapAdminUi/shared/crud/update/content/header/breadcrumbs.html.twig'
    configuration:
      rendered_field_prefix: '> '
      rendered_field: title
    priority: 0

The rendered breadcrumb element will look like this:

This example demonstrates the customization capabilities of Sylius out of the box, allowing for tailored and user-friendly interfaces without extensive development.