Adding footer to main layout

What’s the way to add a footer to the RouterLayout (MainLayout). I tried using AfterNavigationObserver but that’s always called when navigating so the footer get’s added multiple times.

When it doesn’t change in the constructor.
When the footer can change depending on the view, using observer is a good pattern. In there you can check if the footer was already added (store it in a class variable)

The constructor doesn’t work I guess because the footer would be added before the content of the View inheriting from the MainLayout and thus is between the header and the view content. I’ve overriden the removeRouterLayoutContent and call the removeFromParent on the footer and add it in the after navigation event. Thanks for your input :slightly_smiling_face:

You can specify where the view is rendered :slightly_smiling_face: so you could for example add a Header, Main and Footer inside your main layout and replace the content of Main on Navigation

How would I achieve that?

The RouterLayout interface has two methods you can override and do the add/removal on another element https://vaadin.com/api/platform/23.2.6/com/vaadin/flow/router/RouterLayout.html

The AppLayout does it for example https://github.com/vaadin/flow-components/blob/482827ca4a2a44f40dfda51185b00cb91bc749bd/vaadin-app-layout-flow-parent/vaadin-app-layout-flow/src/main/java/com/vaadin/flow/component/applayout/AppLayout.java#L307

So I would add a header, a “dummy div” as a placeholder, a footer?

And override showRouterLayoutContent where I replace the “dummy div” with the actual content?

Correct :slightly_smiling_face: even tho I would recommend to use the Main component from the html components package for accessibility

You would add the content into the dummy div instead of replacing it

Instead of the header tag?

Oh alright

Dummy div = Main :slightly_smiling_face:

Seems to work :slightly_smiling_face: Thanks

Can you give an example of code for this ?

thx