> Markdown version of [Updating Page Title on Navigation](https://vaadin.com/docs/v24/flow/routing/page-titles). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# Updating Page Title during Navigation

You can update the page title in two ways during navigation: use the `@PageTitle` annotation; or implement `HasDynamicTitle`.

These approaches are mutually exclusive. Using both in the same class results in a runtime exception at startup.

## <a id="using-the-pagetitle-annotation"></a>Using the @PageTitle Annotation

The simplest way to update the [Page Title](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) is to use the `@PageTitle` annotation on your `Component` class:

**Example**: Using \`@PageTitle\`to update the page title:

```java
@PageTitle("home")
class HomeView extends Div {

    public HomeView() {
        setText("This is the home view");
    }
}
```

> **Note:** The `@PageTitle` annotation is read only from the actual navigation target; super classes and parent views aren’t considered.

## <a id="setting-the-page-title-dynamically"></a>Setting the Page Title Dynamically

As an alternative, you can also update the page title at runtime by implementing the `HasDynamicTitle` interface.

**Example**: Implementing `HasDynamicTitle` to update the page title.

```java
@Route(value = "blog")
class BlogPost extends Component
        implements HasDynamicTitle,
             HasUrlParameter<Long> {
    private String title = "";

    @Override
    public String getPageTitle() {
        return title;
    }

    @Override
    public void setParameter(BeforeEvent event,
            @OptionalParameter Long parameter) {
        if (parameter != null) {
            title = "Blog Post #" + parameter;
        } else {
            title = "Blog Home";
        }
    }
}
```

`BCB28141-05D7-4DF0-AC9C-C0D73C4FC97D`