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

# Updating the Page Title During Navigation

The page title can be updated in two ways during navigation:

1. Use the `@PageTitle` annotation.

2. Implement `HasDynamicTitle`.

These approaches are mutually exclusive: using both in the same class will result in a runtime exception at startup.

## <a id="using-pagetitle-annotation"></a>Using @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 are not considered.

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

As an alternative, you can implement the `HasDynamicTitle` interface. This approach allows you to change the title from Java at runtime:

**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";
        }
    }
}
```

`C4FDC079-4B9F-443C-8B95-A9307AA992F3`