Documentation versions (currently viewingVaadin 24)

Updating the Page Title during Navigation

You can update the page title in two ways during navigation:

  1. Use the @PageTitle annotation.

  2. Implement HasDynamicTitle.

These approaches are mutually exclusive; using both in the same class results 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 aren’t 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";