Styling app layout navigation bar

Hi everyone,

Can somebody help me out with styling a nav bar in app layout?

I want to add a box-shadow to navigation bar.

What i tried, but didn’t work:

#navbarTop{
  box-shadow: var(--lumo-box-shadow-xl);
}
vaadin-app-layout[slot="navbar"]
 {
  box-shadow: var(--lumo-box-shadow-xl);
}

On inspect from browser

Elements

<div part="navbar" id="navbarTop">
      <slot name="navbar"></slot>
    </div>

Best Regards

Hey Vladislav,

This should work if you’re using Flow:

my-app-layout.css

[part="navbar"]
 {
  box-shadow: var(--lumo-box-shadow-xl);
}

Then import that using @CssImport:

@CssImport(value = "./styles/components/my-app-layout.css", themeFor = "vaadin-app-layout")

This doesn’t work at all for me in Vaadin 19. Don’t know if this require something special as the example is very brief.

For Vaadin 19 you can create vaadin-app-layout.css and place it in <project>/frontend/themes/<theme>/components.

Then in that CSS file you simply add:

[part="navbar"]
 {
  box-shadow: var(--lumo-box-shadow-xl);
}

That doesn’t work either. For example If I try:

[part~=“navbar”]
{
background-color: rebeccapurple;
}

it’s still get the color Lumo decided…
also - it’s quite suprising that this major change has been done without updating the documentation.

We are also trying to get the variable vaadin-app-layout-navbar-offset-size set (to control the height).
This seems impossible since upgrading to v19. We’ve tried both

:host {
–_vaadin-app-layout-navbar-offset-size: 442px;
–vaadin-app-layout-navbar-offset-size: 542px;
}

html {
–_vaadin-app-layout-navbar-offset-size: 242px;
–vaadin-app-layout-navbar-offset-size: 292px;
}

in several places - but it seems like it won’t take…

What do you have in your navbar?

For example, I downloaded a V19 Java-only project from start.vaadin.com. There’s a file called MainView.java which contains the following:

private Component createHeaderContent() {
  HorizontalLayout layout = new HorizontalLayout();
  layout.setId("header"); (1)
  layout.getThemeList().set("dark", true); (2)
  1. Styles related to the header id is defined in main-view.css.
  2. The element’s theme is set to dark which affects its background color.

AppLayout will automatically update vaadin-app-layout-navbar-offset-size based on the content in navbar. So you can remove, or modify, the height definition in main-view.css (3). Alternatively, you can set the height using the Java API with setHeight.

#header {
  height: var(--lumo-size-xl); (3)
  box-shadow: var(--lumo-box-shadow-s);
}