Documentation versions (currently viewingVaadin 23)

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 the @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:

class HomeView extends Div {

    public HomeView() {
        setText("This is the home view");
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 also update the page title at runtime by implementing the HasDynamicTitle interface.

Example: Implementing HasDynamicTitle to update the page title.

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

    public String getPageTitle() {
        return title;

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