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

## <a id="updating-page-title-on-navigation"></a>Updating Page Title on Navigation

There are two ways to update the page title during navigation:

- using the `@PageTitle` annotation

- implementing `HasDynamicTitle`

> **Note:** These two approaches are mutually exclusive: using both on the same class will result 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.

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

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

> **Note:** The `@PageTitle` annotation is read from the actual navigation target only; neither its superclasses nor its parent views are considered.

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

Implementing the interface `HasDynamicTitle` allows us to change the title from Java at runtime:

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

See also:

- [Defining Routes With RouterConfiguration](https://vaadin.com/docs/v10/flow/routing/tutorial-routing-annotation.md)

- [Router Layouts and Nested Router Targets](https://vaadin.com/docs/v10/flow/routing/tutorial-router-layout.md)