Minimize Drawer to show only Icons on Drawer ToggleButton click

Hello! Very new to Vaadin so apologies in advance for any repetition or obvious questions. I wanted to find out if it is possible to minimize the vertical navigation drawer to only the icons when the drawer toggle button is clicked? I’m referring to something like this : but on clicking the hamburger I want to show the icons and hide only the text.

You need to create your own component that produces this for you. The hamburger button in AppLayout hides the whole panel, so the mechanism is quite different. AppLayout is an opinion based macro component, that you can use as base layout. However Vaadin does not mandate that all your applications should be based on it.

It is quite easy to do serverside composition that creates what ever you like. Start by this

`public class MyLayout extends VerticalLayout implements RouterLayout {
HorizontalLayout wrapper = new HorizontalLayout();
HorizontalLayout topBar = new HorizontalLayout();
VerticalLayout drawer = new VerticalLayout();
Div contentArea = new Div();

public MyLayout() {
    wrapper.add(drawer, contentArea);
    add(topBar, wrapper);

public void showRouterLayoutContent(HasElement content) {
   //No need to remove the content explicitly, it’s removed by Flow automatically


And then place the hamburger button in top bar however you like, populate the menu in drawer, and adjust the whole thing with CSS usign the class names in your styles.css.

Thanks, this is helpful! One follow up question, how will this be compatible with the @Route(layout = MainLayout.class) annotation in child views? or is that what RouterLayout supports ?

Yes, it is compatible with that annotation. That is what RouterLayout is all about.