Documentation versions (currently viewingVaadin 23)

You are viewing documentation for Vaadin 23. View latest documentation

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