# Customizing the page titles

## Changing the default title for a specific page

<div data-full-width="false"><figure><img src="/files/XIjUQygwmunrLjUFBHat" alt="Title changed to Browsing speakers"><figcaption></figcaption></figure></div>

By default, each page has a default title based on both page location and resource name. If you're not happy with the preset title for a specific page and would like to customize it, you can easily change it using Twig Hooks.

Search for "title\_block" in the call graph of the Symfony debug profiler in the `Twig Hooks` section.

<div data-full-width="false"><figure><img src="/files/VaZYU39TUPlgB94dQisQ" alt="Title block in profiler"><figcaption></figcaption></figure></div>

We're going to reuse this hook and its template in our config file and add a `header` key:

{% tabs %}
{% tab title="YAML" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.yaml" lineNumbers="true" %}

```yaml
# ...
sylius_twig_hooks:
    hooks:
        # ...
        'sylius_admin.speaker.index.content.header.title_block': # The speaker index title block
            title:
                template: '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig'
                configuration:
                    title: app.ui.browsing_speakers # here is our title override
```

{% endcode %}
{% endtab %}

{% tab title="PHP" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.php" lineNumbers="true" %}

```php
use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;

return static function (ContainerConfigurator $containerConfigurator): void {
    // ...
    $containerConfigurator->extension('sylius_twig_hooks', [
        'hooks' => [
            // The speaker index title block
            'sylius_admin.speaker.index.content.header.title_block' => [
                'title' => [
                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig',
                    'configuration' => [
                        'title' => 'app.ui.browsing_speakers' // here is our title override 
                    ],
                ],
            ],
        ],        
    ]);
};
```

{% endcode %}
{% endtab %}
{% endtabs %}

<div data-full-width="false"><figure><img src="/files/RiwuSlKr8yx9iICUv88f" alt="Show book title"><figcaption></figcaption></figure></div>

Note that you can also use [Symfony Expression Language](https://symfony.com/doc/current/components/expression_language.html) in the configuration key for dynamic titles:

{% tabs %}
{% tab title="YAML" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.yaml" lineNumbers="true" %}

```yaml
# ...
sylius_twig_hooks:
    hooks:
        # ...
        'sylius_admin.book.show.content.header.title_block': # The show page title block
            title:
                template: '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig'
                configuration:
                    title: '@=_context.book.getTitle()' # Use the current book title
```

{% endcode %}
{% endtab %}

{% tab title="PHP" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.php" lineNumbers="true" %}

```php
use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;

return static function (ContainerConfigurator $containerConfigurator): void {
    // ...
    $containerConfigurator->extension('sylius_twig_hooks', [
        'hooks' => [
            // The show page title block
            'sylius_admin.book.show.content.header.title_block' => [
                'title' => [
                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig',
                    'configuration' => [
                        'title' => '@=_context.book.getTitle()' // Use the current book title
                    ],
                ],
            ],
        ],        
    ]);
};
```

{% endcode %}
{% endtab %}
{% endtabs %}

`@=_context` contains all the current Twig vars.

## Adding an icon

<div data-full-width="false"><figure><img src="/files/ikOKqVq2koxO6HyZbSHz" alt="Title with icon"><figcaption></figcaption></figure></div>

To add an icon to the page title, you need to use Twig hooks configuration.

Search for "title\_block" in the call graph of the Symfony debug profiler in the `Twig Hooks` section. We're going to reuse this hook and its template in our config file.

<div data-full-width="false"><figure><img src="/files/VaZYU39TUPlgB94dQisQ" alt="Title block in profiler"><figcaption></figcaption></figure></div>

Here's an example to define a "users" icon on a speaker list.

{% tabs %}
{% tab title="YAML" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.yaml" lineNumbers="true" %}

```yaml
# ...
sylius_twig_hooks:
    hooks:
        # ...
        'sylius_admin.speaker.index.content.header.title_block':
            title:
                # We need to reuse the same template as 'sylius_admin.common.index.content.header.title_block'
                template: '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig'
                configuration:
                    icon: tabler:users # You can use any icon from Symfony UX icons.
```

{% endcode %}
{% endtab %}

{% tab title="PHP" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.php" lineNumbers="true" %}

```php
use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;

return static function (ContainerConfigurator $containerConfigurator): void {
    // ...
    $containerConfigurator->extension('sylius_twig_hooks', [
        'hooks' => [
            'sylius_admin.speaker.index.content.header.title_block' => [
                'title' => [
                    // # We need to reuse the same template as 'sylius_admin.common.index.content.header.title_block'
                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig',
                    'configuration' => [
                        'icon' => 'tabler:users' // You can use any icon from Symfony UX icons.
                    ],
                ],
            ],
        ],        
    ]);
};
```

{% endcode %}
{% endtab %}
{% endtabs %}

You can also define a default icon for every "index" pages.

<div data-full-width="false"><figure><img src="/files/LUMpFYdjtZoAyoPCRdef" alt="Icon for index pages"><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="YAML" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.yaml" lineNumbers="true" %}

```yaml
# ...
sylius_twig_hooks:
    hooks:
        # ...
        'sylius_admin.common.index.content.header.title_block':
            title:
                configuration:
                    icon: tabler:list-details
```

{% endcode %}
{% endtab %}

{% tab title="PHP" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.php" lineNumbers="true" %}

```php
use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;

return static function (ContainerConfigurator $containerConfigurator): void {
    // ...
    $containerConfigurator->extension('sylius_twig_hooks', [
        'hooks' => [
            'sylius_admin.common.index.content.header.title_block' => [
                'title' => [
                    'configuration' => [
                        'icon' => 'list-details'
                    ],
                ],
            ],
        ],        
    ]);
};
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Adding a subheader

<div data-full-width="false"><figure><img src="/files/dnTFbbOFsIe6ZKtpCy7v" alt="Title with subheader"><figcaption></figcaption></figure></div>

To add a subheader to the page title, you need to use Twig hooks configuration.

See the [previous section](#adding-an-icon) to see how to search for the title block.

Here's an example to define a subheader on a speaker list.

{% tabs %}
{% tab title="YAML" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.yaml" lineNumbers="true" %}

```yaml
# ...
sylius_twig_hooks:
    hooks:
        # ...
        'sylius_admin.speaker.index.content.header.title_block':
            title:
                # We need to reuse the same template as 'sylius_admin.common.index.content.header.title_block'
                template: '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig'
                configuration:
                    subheader: app.ui.managing_your_speakers # You also need to add this key to your translations.
```

{% endcode %}
{% endtab %}

{% tab title="PHP" %}
{% code title="config/packages/sylius\_bootstrap\_admin\_ui.php" lineNumbers="true" %}

```php
use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;

return static function (ContainerConfigurator $containerConfigurator): void {
    // ...
    $containerConfigurator->extension('sylius_twig_hooks', [
        'hooks' => [
            'sylius_admin.speaker.index.content.header.title_block' => [
                'title' => [
                    // We need to reuse the same template as 'sylius_admin.common.index.content.header.title_block'
                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig',
                    'configuration' => [
                        'subheader' => 'app.ui.managing_your_speakers' // You also need to add this key to your translations.
                    ],
                ],
            ],
        ],        
    ]);
};
```

{% endcode %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://stack.sylius.com/cookbook/admin_panel/page_titles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.