How to create fixed page header with Vaadin 13?

Flow
1

Hello! I’m new to Vaadin and I have one question about creating UI.

How to create fixed top line (like header, toolbar or etc.), when I am creating web page view from the Java code?

Let’s look at the example of stackoverflow.com (I attached the image, the header is market by red color): when we scroll the page, the header doesn’t scroll with another content.

I don’t understand how to implement such opportunity using layouts which provides Vaadin (like Horizontal\Vertical, Ordered, App Layout). The AppLayout gives an possibility to create ManuBar, but it doesn’t support custom layout (you can only attach an image and text).
I have also seen examples with Vaadin 8, where uses “Panel”, but in Vaadin 13 there is no Panel class.

Is is possible to create such header in new version of framework?

17790848.jpg

2

You need to have content holder layout in your RouterLayout for the changing content and override showRouterLayoutContent(..) method. The default implementation replaces the whole layout, but by overriding the method you can change which content will be replaced when navigating to a view. I.e. view is placed to given content layout. See here: https://vaadin.com/forum/thread/17031021/simple-templating-using-routerlayout