Updating the Page Title During Navigation

There are two ways to update the page title 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.

Using @PageTitle Annotation

The simplest way to update the Page Title is to use the @PageTitle annotation on your Component class:

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

@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.

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.

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