Static Notification with AppLayout


I’m working on a Vaadin 24 project and want to have a static notification which should show up in the AppLayout right underneath the navigation in the app layout on every page. Sadly I only see a way to add components to the navbar or the Drawer in the AppLayout. What would be the best way to achieve this? The Vaadin notification component does not fit our use-case is a static system-message.

Put it at the top of the Content are content, and show/hide as needed.

would that bring page grow/shrink ? I mean suddenly the content moves up and down

well, it does shrink the height of the content area below of course. Were you thinking more in terms of an overlay on top of the normal content?

if you want to go for something like that, it’s a pretty easy CSS job:

  1. apply position:relative to the content layout
  2. place the notification inside the content layout
  3. apply absolute positioning to the notification:
  position: absolute;
  left: 0;
  top: 0;
  right: 0;

You could use a child layout